display: Drawer family: other
Drawer
抽屉组件
API
import Drawer from '@rax-ui/drawer';
// 普通用法
function App() {
const [visible, setVisible] = useState(true);
return (
<Drawer
height={400} // 可以不设置,默认会根据内容高度设置,设置的话可以减少计算尺寸的一步
visible={visible}
placement="bottom"
onMaskClick={() => setVisible(false)}
>
<View>
<Text>content</Text>
</View>
</Drawer>
);
}
// portal: 使用 createPortal
function CustomComponent() {
const [visible, setVisible] = useState(true);
const portal = useRef(null);
return (
<View>
<View ref={portal}></View>
<Drawer
portal={true}
// portal={document.body} // 同上
// portal={() => portal.current} // 其他节点
visible={visible}
placement="bottom"
onMaskClick={() => setVisible(false)}
>
<View>
<Text>content</Text>
</View>
</Drawer>
</View>
);
}
// keepAlive: 保存状态(隐藏时不删除)
function App() {
const [visible, setVisible] = useState(true);
return (
<Drawer
keepAlive={true}
visible={visible}
placement="bottom"
onMaskClick={() => setVisible(false)}
>
{// 保存已输入的值}
<TextInput />
</Drawer>
);
}
Props
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否显示 | boolean | false |
placement | 抽屉放置的位置 | top/bottom/left/right | right |
width | 宽度(left/right 时配置) | string/number | auto |
height | 高度(top/bottom 时配置) | string/number | auto |
keepMounted | 是否隐藏时不删除 | boolean | false |
disableBackdropClose | 是否禁用背景点击关闭 | boolean | false |
onShow | 显示时回调 | () => void | |
onHide | 隐藏时回调 | () => void | |
onEnter | 开始进入时回调函数 | () => void | |
onExit | 开始退出时回调函数 | () => void | |
onEntering | 正在进入时回调函数 | () => void | |
onExiting | 正在退出时回调函数 | () => void | |
onEntered | 进入后回调函数 | () => void | |
onExited | 退出后回调函数 | () => void | |
onBackdropClick | 遮盖背景被点击时调用 | () => void |
CSS API
继承 Modal
名称 | 说明 |
---|---|
drawer |
抽屉盒子 |