React Component of Sidebar

快速使用

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

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);

@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

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

$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