Pular para o conteúdo

Divider

Um divisor é uma linha fina que agrupa conteúdo em listas e leiautes.

Divisores separam conteúdos em grupos correspondentes.

Divisores de lista

O divisor renderiza como um <hr> por padrão. Você pode adicionar a renderização desse elemento no DOM usando a propriedade divider no componente ListItem.

Press Enter to start editing

Especificação HTML5

Em uma lista, você deve garantir que o Divider seja renderizado como um elemento <li> para corresponder à especificação HTML5. Os exemplos abaixo mostram duas maneiras de conseguir isso.

Divisores de inclusão

  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

Divisores de subtítulo

  • Photos

    Jan 9, 2014

  • Divider
  • Work

    Jan 7, 2014

  • Leisure
  • Vacation

    July 20, 2014

Divisores médios

Toothbrush
$4.50

Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall.


Select type

Extra Soft
Soft
Medium
Hard

Divisores com texto

Você também pode renderizar um divisor com conteúdo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Press Enter to start editing

Divisor vertical

You can also render a divider vertically using the orientation prop.


Vertical with variant middle

You can also render a vertical divider with variant="middle".


Vertical com texto

You can also render a vertical divider with content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.