跳转到正文

Vaul 是一款专为 React 应用设计的无样式抽屉组件,可替代对话框,并针对平板电脑和移动设备进行了优化。该组件注重灵活性,允许开发者自定义抽屉在应用中的行为和外观。

它的一项主要功能是在打开抽屉时缩放背景,为用户带来更沉浸的体验。抽屉也可以通过程序控制,开发者能够使用 React 的状态管理来控制其打开状态。

Vaul 提供了简单易用的集成 API,并定义了 Drawer.Root、Drawer.Trigger、Drawer.Content 和 Drawer.Overlay 等组件,便于在应用中采用清晰有序的结构。该库支持多种功能,例如提升交互体验的吸附点、可自定义的抽屉容器,以及禁止关闭的选项。

对于希望实现响应式、适配移动设备的抽屉功能,同时避免样式组件与应用设计系统冲突的开发者来说,这款组件非常合适。

如需查看完整用法示例,用户可以浏览 CodeSandbox 上的一系列交互式演示,其中展示了滚动控制和自定义吸附点等功能。

功能

  • 无样式抽屉组件
  • 针对移动设备和平板电脑优化
  • 背景缩放
  • 可自定义吸附点
  • 以编程方式控制打开状态
  • 支持嵌套抽屉
  • 灵活定位内容
  • 自定义渲染 Portal

相关项目

BaseUI

无头、无样式的 React 组件,可用于构建无障碍且高度可定制的界面,并全面掌控样式。

PrimeVue

丰富的开源 UI 组件集,专为无缝高效地构建 Vue.js 应用而打造。

Radix Primitives

无样式、无障碍、开源的 React 基础组件,适用于高质量 Web 应用和设计系统。

ArkUI

这款开源 UI 解决方案提供可自定义的组件,可适配不同的视觉风格和无障碍标准,助你构建精致的设计系统。

ChakraUI

借助一套强大、易用且高度可定制的基础组件,快速高效地创建无障碍 Web 应用。

cmdk

这个组件为 React 提供了全面的命令菜单解决方案,兼顾用户体验和开发灵活性。

Docusaurus

一个帮助轻松创建文档网站的项目,让你专注于内容和易用性。

MagicUI

一套用途广泛、设计精美的组件,可提升 Web 项目品质并简化设计流程。