Sheet

要使用 Sheet, 需要先在 root Component 下添加 <Miniui /> 组件.

import {Miniui} from 'react-miniui';


render(
  <BrowserRouter>
    <div className="flex flex-direction-column">
      <App />
      <Miniui />
    </div>
  </BrowserRouter>,
document.getElementById('webApplication'))

在需要弹出 Sheet 的页面, 导入 openSheet, closeSheet 方法

import {
  Button,
  openSheet,
  closeSheet
} from 'react-miniui';

Sheet direction

<Button onClick={() => openSheet('弹出面板示例', <SheetExample />, {direction: 'rtl'})}>从右往左</Button>
<Button onClick={() => openSheet('弹出面板示例', <SheetExample />, {direction: 'ltr'})}>从左往右</Button>
<Button onClick={() => openSheet('弹出面板示例', <SheetExample />, {direction: 'btt'})}>从下往上</Button>
<Button onClick={() => openSheet('弹出面板示例', <SheetExample />, {direction: 'ttb'})}>从上往下</Button>

Modal Size

<Button onClick={() => openSheet('弹出面板示例', <SheetExample />, {size: 'large'})}>Show Big Modal</Button>
<Button onClick={() => openSheet('弹出面板示例', <SheetExample />, {size: 'medium'})}>Show Medium Modal</Button>
<Button onClick={() => openSheet('弹出面板示例', <SheetExample />, {size: 'small'})}>Show Small Modal</Button>

Attributes

参数	说明	类型	可选值	默认值
direction	弹出方向	string	rtl \| ltr \| btt \| ttb	rtl
size	大小	string	large \| medium \| small	medium