Divider

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

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

Press Enter to start editing

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

Você também pode renderizar um divisor com conteúdo.

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.

CENTER

LEFT

RIGHT

CHIP

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

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

Press Enter to start editing

Accessibility tips: When using the Divider component for visual decoration, such as in a heading, explicitly specify role="presentation" to the divider to make sure screen readers can announce its content:

<Divider component="div" role="presentation">
  {/* any elements nested inside the role="presentation" preserve their semantics. */}
  <Typography variant="h2">My Heading</Typography>
</Divider>

Divisor vertical

You can also render a divider vertically using the orientation prop.

Vertical with variant middle

You can also render a vertical divider with variant="middle".

Vertical com texto

You can also render a vertical divider with content.

VERTICAL

<Grid container>
  <Grid item xs>
    {content}
  </Grid>
  <Divider orientation="vertical" flexItem>
    VERTICAL
  </Divider>
  <Grid item xs>
    {content}
  </Grid>
</Grid>

<Grid container>
  <Grid item xs>
    {content}
  </Grid>
  <Divider orientation="vertical" flexItem>
    VERTICAL
  </Divider>
  <Grid item xs>
    {content}
  </Grid>
</Grid>

Press Enter to start editing

API

<Divider />