Saltar al contenido

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 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>

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

You can also render a divider with content.

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>

Divider (divisor)

Puede también renderizar un divisor vertical usando la propiedad orientation.


Tenga en cuenta el uso del accesorio flexItem para acomodar al contenedor flex.

Vertical with text

You can also render a vertical divider with content.

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>