npm package: @irim/rc-sidebar
Description: react sidebar component
Author: Pluto
Latest version: 1.1.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# React Component of Sidebar

![version](https://img.shields.io/npm/v/@irim/rc-sidebar)
![license](https://img.shields.io/npm/l/@irim/rc-sidebar)
![downloads](https://img.shields.io/npm/dw/@irim/rc-sidebar)

<!-- 组件截图 -->

## 快速使用

- `$ npm install @irim/rc-sidebar --save`

```js
import Sidebar from '@irim/rc-sidebar';

class Demo extends React.Component {
  state = {
    visible: false,
  };

  handleClick = () => {
    this.setState({ visible: !this.state.visible });
  }

  handleClose = (fromAction) => {
    this.setState({ visible: false });
  }

  render() {
    return (
      <div className="demo-container">
        <button className="toggle-btn" onClick={this.handleClick}>show</button>
        <button className="x-safe-node">I&apos;m safe node</button>
        <Sidebar visible={this.state.visible}
          onClose={this.handleClose} title="Title of Popup">
          <h4>I am content title</h4>
          <p>I am content body~~</p>
        </Sidebar>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
```

```scss
@import "~@irim/rc-sidebar/lib/index"; 
```

## API

| props          | desc                              | type              | required | default                    |
| -------------- | --------------------------------- | ----------------- | -------- | -------------------------- |
| title          | header title                      | string            | no       | `null`                     |
| defaultVisible | visible when init                 | boolean           | no       | -                          |
| visible        | visible of popup                  | boolean           | no       | -                          |
| onClose        | event for popup close             | function          | no       | noop                       |
| closable       | whether has close btn             | boolean           | no       | `true`                     |
| hasMask        | show mask when popup showing      | boolean           | no       | `false`                    |
| offsetTop      | offset of top                     | number            | no       | `0`                        |
| autoFocus      | auto focus to form element        | boolean           | no       | `false`                    |
| dir            | show direction                    | enum(right, left) | no       | `'right'`                  |
| cacheBody      | hold body when popup is hidden    | boolean           | no       | `true`                     |
| root           | root node for outer click         | DOMElement        | no       | #root or body              |
| safeNode       | safe node that ignore outer click | Array             | no       | `['.rc-sidebar-safenode']` |

### SCSS Variables

> 在引用样式前提前定义即可修改变量，以下为默认值

```scss
$rc-sidebar-color-header: #F2F2F2; // 头部背景色
$rc-sidebar-color-title: #666666; // 头部标题文字颜色
$rc-sidebar-color-primary: #EB8A00; // 关闭按钮 HOVER 颜色
$rc-sidebar-size-default: 600px; // 默认宽度
$rc-sidebar-size-min: 480px; // 最小宽度
$rc-sidebar-offset-top: 0; // 默认顶部距离
$rc-sidebar-offset-bottom: 1px; // 默认底部距离
$rc-sidebar-zindex: 1001; // 层高
```

## LICENSE

BSD-3-Clause License