Divider

Ein Trenner ist eine dünne Linie, die den Inhalt in Listen und Layouts gruppiert.

Trenner trennt den Inhalt in klare Gruppen.

Listentrenner

Der Trenner gibt per Standard ein <hr>-Element aus. Sie können sich dieses zusätzliche Element sparen, in dem sie die divider-Eigenschaft bei der ListItem-Komponente verwenden.

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

HTML5-Spezifikation

In einer Liste sollten sie sicherstellen, dass der Trenner als <li> gerendered wird, um der HTML5 Spezifikation zu entsprechen. Die folgenden Beispiele zeigen wie dies erreicht werden kann.

Eingerückter Trenner

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

Subheader-Trenner

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

Mitteltrenner

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

Vertikale Trennlinien

You can also render a divider vertically using the orientation prop. Note the use of the flexItem prop to accommodate for the flex container.

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

API

<Divider />