Divisor

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 component="nav" className={classes.root} 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 verticais

Você pode renderizar um divisor vertical usando a propriedade orientation. Observe o uso da propriedade flexItem para acomodar em um contêiner flexível.

<Grid container alignItems="center" className={classes.root}>
  <FormatAlignLeftIcon />
  <FormatAlignCenterIcon />
  <FormatAlignRightIcon />
  <Divider orientation="vertical" flexItem />
  <FormatBoldIcon />
  <FormatItalicIcon />
  <FormatUnderlinedIcon />
</Grid>

API

<Divider />