抽屉 Drawer - Geist UI

Drawer / 抽屉

固定在屏幕边缘的可交互元素组。

基础的

基础示例。

定位

APIs / 接口文档

`Drawer.Props`

属性	描述	类型	推荐值	默认
visible	打开或关闭	`boolean`	-	`false`
onClose	关闭事件	`() => void`	-	-
onContentClick	抽屉内部元素点击事件	`(e: MouseEvent) => void`	-	-
wrapClassName	抽屉弹出内容的类名	`string`	-	-
keyboard	按下 Esc 键关闭元素	`boolean`	-	`true`
disableBackdropClick	点击背景层时不关闭抽屉	`boolean`	-	`false`
placement	抽屉相对于屏幕的位置	DrawerPlacement	-	`right`
...	原生属性	`HTMLAttributes`	`'name', 'className', ...`	-

`Drawer.Title.Props`

属性	描述	类型	推荐值	默认
...	原生属性	`HTMLAttributes`	`'id', 'className', ...`	-

`Drawer.Subtitle.Props`

属性	描述	类型	推荐值	默认
...	原生属性	`HTMLAttributes`	`'id', 'className', ...`	-

`Drawer.Content.Props`

属性	描述	类型	推荐值	默认
...	原生属性	`HTMLAttributes`	`'id', 'className', ...`	-

`DrawerPlacement`

type DrawerPlacement = 'top' | 'bottom' | 'right' | 'left'

文档贡献者