Divisor
Um divisor é uma linha fina que agrupa conteúdo em listas e leiautes.
Divisores separam grupos de conteúdos.
Divisores de lista
O divisor renderiza como um <hr> por padrão. Você pode salvar a renderização desse elemento 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 inserção
- Photos
Jan 9, 2014
- Work
Jan 7, 2014
- Vacation
July 20, 2014
- Photos
Jan 9, 2014
- Divider
- Work
Jan 7, 2014
- Leisure
- Vacation
July 20, 2014
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall.
Select type
{content}
<Divider>CENTER</Divider>
{content}
<Divider textAlign="left">LEFT</Divider>
{content}
<Divider textAlign="right">RIGHT</Divider>
{content}
<Divider>
<Chip label="CHIP" />
</Divider>
{content}<Grid container alignItems="center" className={classes.root}>
<FormatAlignLeftIcon />
<FormatAlignCenterIcon />
<FormatAlignRightIcon />
<Divider orientation="vertical" flexItem />
<FormatBoldIcon />
<FormatItalicIcon />
<FormatUnderlinedIcon />
</Grid>Observe o uso da propriedade
flexItempara acomodar em um contêiner flexível.
Vertical com texto
Você também pode renderizar um divisor vertical com conteúdo.
<Grid container className={classes.root}>
<Grid item xs>
{content}
</Grid>
<Divider orientation="vertical" flexItem>
VERTICAL
</Divider>
<Grid item xs>
{content}
</Grid>
</Grid>