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.

<List sx={style} component="nav" aria-label="mailbox folders">
  <ListItem button>
    <ListItemText primary="Inbox" />
  </ListItem>
  <Divider />
  <ListItem button divider>
    <ListItemText primary="Drafts" />
  </ListItem>
  <ListItem button>
    <ListItemText primary="Trash" />
  </ListItem>
  <Divider light />
  <ListItem button>
    <ListItemText primary="Spam" />
  </ListItem>
</List>

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.
<Root>
  {content}
  <Divider>CENTER</Divider>
  {content}
  <Divider textAlign="left">LEFT</Divider>
  {content}
  <Divider textAlign="right">RIGHT</Divider>
  {content}
  <Divider>
    <Chip label="CHIP" />
  </Divider>
  {content}
</Root>

Divisor vertical

Você pode renderizar um divisor vertical usando a propriedade orientation.


Observe o uso da propriedade flexItem para acomodar em um contêiner flexível.

Vertical with variant middle

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


Vertical com texto

Você também pode renderizar um divisor vertical 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.
<Grid container>
  <Grid item xs>
    {content}
  </Grid>
  <Divider orientation="vertical" flexItem>
    VERTICAL
  </Divider>
  <Grid item xs>
    {content}
  </Grid>
</Grid>