Plass UI
函式庫設計
由玻璃與漸層構成的一套設計語言,同時以 React 函式庫與 Flutter 套件提供。可按壓的表面帶有色調,承載內容的表面則是透明的,兩邊的元件名稱完全相同。
關於這個專案
Plass UI 是一門設計語言,以兩個函式庫的形式發布。同樣的七十九個元件,名稱相同、數值相同,React 專案能用,Flutter 應用程式也能用。在一邊學到的就是在另一邊要用的,兩套體系不會到第三個版本就各走各的。
每一個表面都在回答同一個問題:這是被按的,還是盛裝東西的。被按的是著色玻璃——漸層在自己的色系裡轉,而不是變暗;陰影落下時帶著同一個顏色;還有一團跟著游標走的光暈。盛裝東西的是清玻璃:半透明、深度模糊、以一道白色細線收邊,從不上色。沒有斜面,按下時也不移動,因為縱深由光、色與模糊承擔。每一個漸層節點都對著它自己的文字量過,所以最亮的那個角落也仍然滿足閱讀所需的對比。
五個屬性——size、color、variant、density、elevation——撐起整個 API,深色模式在兩邊都跟隨平台。React 套件是 ESM、可搖樹優化,只有一個執行階段相依套件;Flutter 套件則完全沒有相依,不需要資源檔、外掛或 Provider。有一件事兩個套件都替你做不了:把玻璃背後的頁面塗上顏色——而正是為此準備了兩個權杖。
功能
文件網站
TypeScript 型別
多語言支援
經測試驗證
跨平台支援
內建無障礙支援
深色模式
支援搖樹優化
