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 | 抽屉盒子 |