@irim/sidebar v1.0.0

side-popup

快速使用

• $ tnpm install @irim/sidebar --save

import SidePopup from '@irim/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>
        <SidePopup visible={this.state.visible}
          onClose={this.handleClose} title="Title of Popup">
          <h4>I am content title</h4>
          <p>I am content body~~</p>
        </SidePopup>
      </div>
    );
  }
}

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

@import "~@irim/sidebar/lib/index"; 

API

SCSS Variables

在引用样式前提前定义即可修改变量

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

LICENSE

BSD-3-Clause License