Divider

A divider is a thin line that groups content in lists and layouts. - Material Docs

import { Divider } from 'material-bread';

A Divider can be used in most components to create a visible separation between sections

Live Editing

class Dividers extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View>
        <Divider />
        <Divider />
        <Divider marginVertical={24} />
      </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Divider } from 'material-bread';

class Dividerpage extends Component {
    constructor(props) {
      super(props)
    }
    render() {
      return (
        <View>
          <Divider />
        </View>
      );
    }
}

Name

Description

Type

Default

insetHeader

Subheader inset number

number

insetLeft

Inset of Divider from left

number

marginVertical

Adds magin on top and bottom for spacing

number

style

Styles root element

object

subheader

Displays under a divider as text

string

You can see even more examples in the Storybook environment.

Subheader

Title

Section

Live Editing

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View >    
        <Divider subheader={'Subheader'} />
        <Divider subheader={'Title'} insetHeader={8} />
        <Divider subheader={'Section'} insetHeader={16} marginVertical={24} />
      </View>
    );
  }
}

insetLeft shortens the width of the divider by the provided amount and moves the Divider to the right by that amount. This is useful for keeping the Divider inline with other elements.

Favorites



Janet Perkins



Mary Perkins



Peter Carlsson



Trevor Hansen

Live Editing

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
        <List subheader={'Favorites'} style={{ width: 300 }}>
        <ListItem
          text={'Janet Perkins'}
          media={
            <Avatar
              type="icon"
              content="person"
              contentColor={'#ececec'}
              color={'#a3a3a3'}
              size={40}
            />
          }
        />

        <ListItem
          text={'Mary Perkins'}
          media={
            <Avatar
              type="icon"
              content="person"
              contentColor={'#ececec'}
              color={'#a3a3a3'}
              size={40}
            />
          }
        />
        <Divider insetLeft={20} />
        <ListItem
          text={'Peter Carlsson'}
          media={
            <Avatar
              type="icon"
              content="person"
              contentColor={'#ececec'}
              color={'#a3a3a3'}
              size={40}
            />
          }
        />
        <ListItem
          text={'Trevor Hansen'}
          media={
            <Avatar
              type="icon"
              content="person"
              contentColor={'#ececec'}
              color={'#a3a3a3'}
              size={40}
            />
          }
        />
     
      </List>
    );
  }
}

Divider

Component #

Usage #

Props #

Demos #

Subheader #

InsetLeft #