Divider (divisor)

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. El divisor renderiza un <hr> por defecto.

<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

Divisores de subencabezado

Photos
Jan 9, 2014
Divider
Work
Jan 7, 2014
Leisure
Vacation
July 20, 2014

Divisores de Mitad

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 Verticales

Puede también renderizar un divisor vertical usando la propiedad orientation. Tenga en cuenta el uso del accesorio flexItem para acomodar al contenedor flex.

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

API

<Divider />