Divider

Разделитель - это тонкая линия, которая группирует содержимое (контент) в списки и макеты (слои).

Разелители делят содержимое (контент) на явные (четкие) группы.

Разделители списков

The divider renders as an <hr> by default. 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>

Спецификации HTML5

In a list, you should ensure the Divider is rendered as an <li> to match the HTML5 specification. The examples below show two ways of achieving this.

Вкладыш

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

Центральные разделители

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

Vertical Dividers

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.

CENTER

LEFT

RIGHT

CHIP

{content}
<Divider>CENTER</Divider>
{content}
<Divider textAlign="left">LEFT</Divider>
{content}
<Divider textAlign="right">RIGHT</Divider>
{content}
<Divider>
  <Chip label="CHIP" />
</Divider>
{content}

Divider (разделитель)

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

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

Note the use of the flexItem prop to accommodate for the flex container.

Vertical with text

You can also render a vertical divider with content.

VERTICAL

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

API

<Divider />