- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## BeDrawer 抽屉

有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.

### 基本用法

呼出一个临时的侧边栏, 可以从多个方向呼出

visible: false
direction: rtl

left to right
right to left
top to bottom
bottom to top
需要设置 visible 属性，它的类型是 boolean,当为 true 时显示 Drawer。Drawer 分为两个部分：title 和 body，title 需要具名为 title 的 slot, 也可以通过 title 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开

    import { BeDrawer } from '@brewer/beerui'
    let visible = false
    let direction = 'rtl'

    <BeDrawer
    	bind:visible={visible}
    	bind:direction={direction}
    >
    	<p>Drawer</p>
    </BeDrawer>

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
visible | 展示/隐藏 | boolean | true/false | false
title | 标题文字 | string | - | 提示
direction | 方向 | string | ltr/rtl/ttb/btt | rtl
size | 窗体的大小 | string | 'x%'/'100px' | 30%
mask | 是否需要遮罩层 | boolean | true/false | true
isShowHeader | 是否显示头部 | boolean | true/false | true
isShowClose | 是否显示关闭按钮 | boolean | true/false | true
closeOnClickModal | 是否可以通过点击 mask 关闭 Dialog | boolean | true/false | true
isCloseEscape | 是否可以通过按下 ESC 关闭 Drawer | boolean | true/false | true

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
beforeClose | 关闭前的方法(用户传入回调函数) | 接收返回值true/false false时不执行关闭操作
close | 关闭的回调 | null

### Slot

name | 说明
--- | ---
title | 自定义标题