unsullied-react-drawer

0.1.3 • Public • Published

react-drawer

A toggle drawer to hide/show other content built for React.

Install

npm install unsullied-react-drawer --save

Usage

  import Drawer from 'unsullied-react-drawer';

  React.createClass({

    render() {
      return <Drawer isOpen={true}
            className='my-class-name'
            header='This is a great header'>
          <ul>
            <li>Information 1</li>
            <li>Information 2</li>
            <li>Information 3</li>
          </ul>
      </Drawer>
    }
  });

Params

isOpen {Boolean} initial state of drawer. Can set this to open programatically.

header {Any} What appears in header of drawer.

Drawer Icons

To get drawers to have icons, you will need the following classes defined with corresponding images in path

.unsullied-icon-chevron-up {
  background-image: url('/path/to/img/unsullied-chevron-up.svg');
  background-repeat: no-repeat;
  @include vendor('transform', scale(0.75)); // can omit this or edit scale multiplier as necessary
  height: 25px;
}
.unsullied-icon-chevron-down {
  background-image: url('/path/to/img/unsullied-chevron-down.svg');
  background-repeat: no-repeat;
  @include vendor('transform', scale(0.75)); // can omit this or edit scale multiplier as necessary
  height: 25px;
}

To edit the color of the icons, you can edit the svg directly by adding a fill property of the color of your choice:

 <path d="M16.585 8.585l-4.585 4.585-4.585-4.585-1.415 1.415 6 6 6-6z" fill='#999999'></path>

Package Sidebar

Install

npm i unsullied-react-drawer

Weekly Downloads

0

Version

0.1.3

License

MIT

Last publish

Collaborators

  • moog16