category: Components cols: 1 subtitle: 侧滑框 type: Everest title: SideSlip

侧滑框。

作者：荣陶胜

何时使用

• 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
• 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
• 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

API

SideSlip

使用方式如下

@SideSlip()
class CustomizedSideSlip extends React.Component {
  render () {
    return <p>侧滑框里面的内容</p>
  }
}

// 或高阶组件的方式  CustomizedSideSlip = SideSlip()(CustomizedSideSlip);
ReactDOM.render(<CustomizedSideSlip>点击我，会打开侧滑框</CustomizedSideSlip>, mountNode);

打开侧滑框

使用方式如下

const WarpDemo = SideSlip()(() => <h1>侧滑框内容</h1>)

// 第1种方式
class Page1 extends React.Component {
  render () {
    // 使用
    return <WarpDemo>点击打开侧滑框</WarpDemo>
  }
}

// 第2种方式
class Page2 extends React.Component {
  render () {
    // 使用
    return (
      <div>
        <WarpDemo ref={slip => (this.sideSlip = slip)} />
        <a onClick={() => this.sideSlip.open({title: '主动打开'})}>点击我打开侧滑框</a>
      </div>
    )
  }
}

关闭侧滑框 SideSlip.close

使用方式如下

在SideSlip包裹的组件中， 可以通过 this.props.sideModalLevel 获取当前侧滑框层级

// sideModalLevel 关闭的层级
SideSlip.close({sideModalLevel: number})

SideSlip.DisableCloseSideModal

使用方式如下

点击侧滑以外的内容不期望关闭侧滑框

<SideSlip.DisableCloseSideModal>
  点击这里是不会关闭侧滑框的
</SideSlip.DisableCloseSideModal>

或加上 ec-uyun-side-modal-link 类名

<div className='ec-uyun-side-modal-link'>
  点击这里是不会关闭侧滑框的
</div>

使用经过 SideSlip 包装的组件 Api

Current Tags

• 0.1.8                                ...           latest (6 years ago)

9 Versions

• 0.1.0                                ...           7 years ago
• 0.1.1                                ...           7 years ago
• 0.1.2                                ...           7 years ago
• 0.1.3                                ...           7 years ago
• 0.1.4                                ...           7 years ago
• 0.1.5                                ...           7 years ago
• 0.1.6                                ...           7 years ago
• 0.1.7                                ...           6 years ago
• 0.1.8                                ...           6 years ago