@rax-ui/drawer NPM

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