SheetSide

Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen. - Material Docs

import { SheetSide } from 'material-bread';

SheetSide animates from the left or right of the screen to show whatever you want. You can manually control swipe left and right on the sheet by using onSwipeRight and onSwipeLeft .

OPEN SHEET

Live Editing

class MainDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        visible: false,
    }
  }
  render() {
    return (
      <View style={{ flex: 1}}>
        <Button
          text="Open Sheet"
          onPress={() => {
            this.setState({ visible: true });
          }}
        />
        <SheetSide
          visible={this.state.visible}
          onBackdropPress={() => this.setState({ visible: false })}
          onSwipeRight={() => this.setState({ visible: false })}>
          <List>
            <ListItem
              text={'Attractions'}
              icon={<Icon name={'local-movies'} size={24} />}
            />
            <ListItem
              text={'Dining'}
              icon={<Icon name={'local-dining'} size={24} />}
            />
            <ListItem
              text={'Education'}
              icon={<Icon name={'edit'} size={24} />}
            />
            <ListItem
              text={'Health'}
              icon={<Icon name={'favorite'} size={24} />}
            />
            <ListItem
              text={'Family'}
              icon={<Icon name={'group'} size={24} />}
            />
            <ListItem
              text={'Office'}
              icon={<Icon name={'content-cut'} size={24} />}
            />
            <ListItem
              text={'Promotions'}
              icon={<Icon name={'loyalty'} size={24} />}
            />
          </List>
        </SheetSide>
      </View>
    );
  }
}

import React, { Component } from 'react';
import { SheetSide, Button, List, ListItem, Icon  } from 'material-bread';

class SelectPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        visible: false
    }
  }
  render() {
    return (
      <View style={{ flex: 1}}>
        <Button
          text="Open Sheet"
          onPress={() => {
            this.setState({ visible: true });
          }}
        />
        <SheetSide
          visible={this.state.visible}
          onBackdropPress={() => this.setState({ visible: false })}
          onSwipeRight={() => this.setState({ visible: false })}>
          <List>
            <ListItem
              text={'Attractions'}
              icon={<Icon name={'local-movies'} size={24} />}
            />
            <ListItem
              text={'Dining'}
              icon={<Icon name={'local-dining'} size={24} />}
            />
            <ListItem
              text={'Education'}
              icon={<Icon name={'edit'} size={24} />}
            />
            <ListItem
              text={'Health'}
              icon={<Icon name={'favorite'} size={24} />}
            />
            <ListItem
              text={'Family'}
              icon={<Icon name={'group'} size={24} />}
            />
            <ListItem
              text={'Office'}
              icon={<Icon name={'content-cut'} size={24} />}
            />
            <ListItem
              text={'Promotions'}
              icon={<Icon name={'loyalty'} size={24} />}
            />
          </List>
        </SheetSide>
      </View>
    );
  }
}

Name

Description

Type

Default

cardVerticalPadding

Padding vertical on the sheet, this used in calculating the position

number

duration

How long the hide animation takes

number

200ms

onBackdropPress

Callback when mask is pressed, usually to close sheet

func

onSwipeLeft

Callback on swiping left, usually to close sheet

func

onSwipeRight

Callback on swiping right, usually to close sheet

func

pageHeight

Manually control the height of the page, useful for demos or sheets that shouldn't take up the whole page

number

ScreenHeight

pageWidth

Manually control the width of the page, useful for demos or sheets that shouldn't take up the whole page

number

ScreenHeight

sheetWidth

Sheetwidth on the web, no effect on widthPercentage

number

300

side

Determines the side the sheet appears on

string

right

style

Styles sheet element

object

visible

Toggles Sheet animation

bool

widthPercentage

Percentage of the screen the sheet should take up on mobile, no effect on web

number

wrapperStyles

Styles wrapper around the whole page

object

SheetSide

Component #

Usage #

Props #