Divider
Un divisor es una línea delgada que agrupa el contenido en listas y diseños.
Los Divisores separan contenido en grupos claros.
Divisores de lista
You can save rendering this DOM element by using the divider property on the ListItem component. You can save rendering this DOM element by using the divider property on the ListItem component.
<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>Especificación HTML5
En una lista, debe asegurarse de que el Divider se representa como una <li> para que coincida con la especificación de HTML5. El ejemplo debajo muestra dos maneras de lograr esto.
Separadores insertados
- 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>Tenga en cuenta el uso del accesorio
flexItempara acomodar al contenedor flex.
Vertical with text
You can also render a vertical divider with content.
<Grid container className={classes.root}>
<Grid item xs>
{content}
</Grid>
<Divider orientation="vertical" flexItem>
VERTICAL
</Divider>
<Grid item xs>
{content}
</Grid>
</Grid>