Velvet UI icon

Velvet UI

Velvet UI 是一套 React 元件產品,適合打造底部抽屜、側欄、對話框、光箱與可堆疊提示訊息,提供具原生手感的圖層式介面與滑動手勢、動態效果。

Velvet UI

用於圖層式表面與動態效果的 React 介面元件

Velvet UI 是一套專注於底部抽屜、模態圖層、側欄、光箱與相關展示模式的 React 元件產品。首頁以貼近真實應用的範例來展示這些元件,而不是抽象的 API 圖表,因此能清楚傳達產品目標:協助團隊在 React 中建立具原生手感的介面圖層。

來源描述強調可滑動的底部抽屜、巢狀圖層、spring 動態效果、可及性原語,以及可堆疊提示訊息。整體來看,這個產品被定位為一組互動原語,適合需要圖層式 UI、以手勢驅動關閉,以及精緻動態效果,同時又不脫離 React 生態系的應用。

核心功能

底部抽屜原語

包含底部對齊的抽屜模式,支援以滑動關閉來實現行動裝置式互動。

多種圖層變體

支援多種呈現樣式,例如對話框、導覽抽屜、頂部抽屜、側邊抽屜與全螢幕抽屜。

吸附點版面配置

提供具有多個吸附點的 detent 抽屜,用於分階段展開與收合。

感知捲動的互動

透過可捲動抽屜中的協調捲動與拖曳行為,處理較長內容。

巢狀與堆疊圖層

包含堆疊抽屜與第二抽屜模式,用於圖層式工作流程。

提示訊息支援

加入以提示訊息為主的互動,meta 描述中特別提到可堆疊提示訊息。

實際使用情境

  • 行動面板互動

    將底部抽屜、detent 抽屜或持續性抽屜模式用於適合行動裝置的面板,並可分階段展開與收合。

  • 聚焦式任務流程

    當任務需要專注的圖層並減少背景干擾時,可使用模態對話框、光箱與全螢幕抽屜。

  • 邊緣式導覽與設定

    將導覽抽屜與側邊抽屜用於應用程式導覽、設定或帳號區域,這些區域會從邊緣滑入。

  • 長內容與媒體密集介面

    使用可捲動抽屜、支援鍵盤的抽屜與卡片展開來支援長表單、內容檢視或媒體控制。

  • 圖層式與進階抽屜工作流程

    當工作流程需要多個圖層表面,或需要在視窗邊緣之外保持視覺分離的面板時,可使用堆疊抽屜與分離式抽屜。

Pros and Cons

Pros

  • 在單一產品中涵蓋了廣泛的抽屜與表面模式。
  • 強調滑動關閉與其他以手勢為基礎的互動。
  • 根據頁面描述包含可及性原語。
  • 支援圖層式 UI 模式,例如堆疊抽屜與巢狀圖層。
  • 展示了訊息、音樂、旅行、筆記與媒體等實際範例情境,有助於理解適用場景。

Cons

  • 提供的來源文字沒有揭露套件細節、框架需求或安裝步驟。
  • 截取的文字中未包含價格、方案結構或使用限制。

FAQ

Velvet UI 提供什麼類型的元件?

來源描述將 Velvet UI 描述為 React 底部抽屜與提示訊息元件。它包含多種抽屜變體,例如底部抽屜、對話框、導覽抽屜、 detent 抽屜、全螢幕抽屜、側邊抽屜、光箱與持續性抽屜。提供的文字中沒有顯示獨立的安裝流程。

Velvet UI 適合誰使用?

頁面文字強調滑動關閉、巢狀圖層、spring 動態效果與可及性原語。它定位於具原生手感的 React 介面,而不是通用型設計系統。

Velvet UI 有公開定價資訊嗎?

有價格頁面,表示此產品包含定價資訊,但提供的來源文字沒有列出方案名稱、價格或使用限制。

Velvet UI 可以處理巢狀或可堆疊的圖層嗎?

有。來源包含多種抽屜模式,包括可堆疊抽屜與具有雙向滑動關閉的卡片展開模式,表示它支援組合式的圖層互動。

Quick Facts

類別
Developer Tool
平台
React
主要焦點
底部抽屜、側欄、對話框與提示訊息
來源網域
velvetui.co
定價頁面
可用,但提供文字未詳述