Velvet UI icon

Velvet UI

Velvet UI 是一款用于构建底部抽屉、侧边栏、对话框、灯箱和可堆叠 toast 的 React 组件产品,适合需要原生手感、滑动手势与动效的应用。

Velvet UI

用于层叠表层与动效的 React 界面组件

Velvet UI 是一款专注于底部抽屉、模态表层、侧边栏、灯箱及相关展示模式的 React 组件产品。主页通过贴近真实应用的示例来展示这些组件,而不是抽象的 API 图示,这让产品意图更加清晰:帮助团队在 React 中构建具有原生手感的界面层。

源描述强调了可滑动的底部抽屉、嵌套表层、弹簧动效、可访问的基础组件以及可堆叠的 toast。综合来看,这个产品被定位为一组交互基础组件,适用于需要层叠式 UI、手势驱动关闭和精致动效的应用,同时保持在 React 生态内。

核心能力

底部抽屉基础组件

包含底部对齐的抽屉模式,支持滑动关闭,适合移动端式交互。

多种表层变体

支持多种展示样式,例如模态对话框、导航抽屉、顶部抽屉、侧边抽屉和全屏抽屉。

吸附点布局

提供带有多个吸附点的停靠点抽屉,用于分阶段展开和收起。

感知滚动的交互

通过可滚动抽屉中的协同滚动与拖拽行为,覆盖较长内容。

嵌套与堆叠表层

包含堆叠抽屉和第二抽屉模式,用于层叠式工作流。

Toast 支持

增加了 toast 相关交互,元描述中特别提到可堆叠 toast。

实际使用场景

  • 移动端面板交互

    将底部抽屉、停靠点抽屉或持续抽屉模式用于适合移动端的面板,这些面板可以分阶段展开和收起。

  • 聚焦型任务流程

    当任务需要一个聚焦的表层并尽量减少背景干扰时,可使用模态对话框、灯箱和全屏抽屉。

  • 边缘式导航与设置

    将导航抽屉和侧边抽屉用于应用导航、设置或账户区域,这些区域从边缘滑入。

  • 长内容与媒体密集型界面

    通过可滚动抽屉、可感知键盘的抽屉和卡片展开来支持长表单、内容审核或媒体控制。

  • 层叠与高级抽屉工作流

    当工作流需要多个层叠表层,或需要一个在视觉上与视口边缘保持分离的面板时,可使用堆叠抽屉和分离式抽屉。

Pros and Cons

Pros

  • 在一个产品中覆盖了广泛的抽屉和表层模式。
  • 强调滑动关闭以及其他基于手势的交互。
  • 根据页面描述包含可访问的基础组件。
  • 支持堆叠抽屉和嵌套表层等层叠式 UI 模式。
  • 展示了消息、音乐、旅行、笔记和媒体等实际示例场景,有助于判断适用性。

Cons

  • 提供的源文本未披露包信息、框架要求或安装步骤。
  • 抓取到的文本中未包含定价、套餐结构或使用限制。

FAQ

Velvet UI 提供什么类型的组件?

源文本将 Velvet UI 描述为 React 底部抽屉和 toast 组件。它包含多种抽屉变体,例如底部抽屉、模态对话框、导航抽屉、停靠点抽屉、全屏抽屉、侧边抽屉、灯箱和持续抽屉。提供的文本中没有展示单独的安装流程。

Velvet UI 适合哪些用户?

页面文字强调滑动关闭、嵌套表层、弹簧动效和可访问的基础组件。它更适合原生手感的 React 界面,而不是通用设计系统。

Velvet UI 是否提供定价详情?

页面中出现了定价页面,这说明产品包含定价信息,但提供的源文本没有包含套餐名称、价格或使用限制。

Velvet UI 能处理嵌套或堆叠表层吗?

可以。源文本包含多种抽屉模式,包括堆叠抽屉和带双向滑动关闭的卡片展开模式,这表明它支持组合式的层叠交互。

Quick Facts

类别
开发者工具
平台
React
主要聚焦
底部抽屉、侧边栏、对话框和 toast
来源域名
velvetui.co
定价页面
可用,但提供的文本中未详述