1.1.3 • Published 4 years ago
@irim/rc-sidebar v1.1.3
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'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