开发者2024 年 10 月 11 日

Vaul: 适用于 React 的抽屉组件

Vaul 是一个无样式的 React 抽屉组件，可作为移动设备和平板设备上的对话框替代品。

Vaul: 适用于 React 的抽屉组件

🔗 GitHub

Vaul 是一个无样式的 React 抽屉组件，可作为移动设备和平板设备上的对话框替代品。

该组件无预设样式，支持手势驱动的动画效果，由 Emil Kowalski 制作。

使用方法

要开始使用该库，请在你的项目中安装：

code.shell
1
npm install vaul

在应用中使用抽屉组件：

code.javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Drawer } from 'vaul';
 
function MyComponent() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

文档

在 文档 中查阅完整的 API 参考和示例。

GitHub开源React组件

相关文章