Plass UI
库设计
由玻璃与渐变构成的一套设计语言,同时以 React 库和 Flutter 包提供。可按压的表面带有色调,承载内容的表面则是透明的,两边的组件名称完全一致。
关于这个项目
Plass UI 是一门设计语言,以两个库的形式发布。同样的七十九个组件,名字相同、数值相同,React 项目能用,Flutter 应用也能用。在一边学到的就是在另一边要用的,两套体系不会到第三个版本就各走各的。
每一个表面都在回答同一个问题:这是被按的,还是盛放东西的。被按的是着色玻璃——渐变在自己的色系里转,而不是变暗;阴影落下时带着同一种颜色;还有一团跟着指针走的光晕。盛放东西的是清玻璃:半透明、深度模糊、以一道白色细线收边,从不着色。没有斜面,按下时也不移动,因为纵深由光、色与模糊承担。每一个渐变节点都对着它自己的文字量过,所以最亮的那个角落也仍然满足阅读所需的对比度。
五个属性——size、color、variant、density、elevation——撑起整个 API,深色模式在两边都跟随平台。React 包是 ESM、可摇树,只有一个运行时依赖;Flutter 包则完全没有依赖,不需要资源文件、插件或 Provider。有一件事两个包都替你做不了:把玻璃背后的页面涂上颜色——而恰恰为此准备了两个令牌。
功能
文档站点
TypeScript 类型
多语言支持
经测试验证
跨平台支持
内置无障碍支持
深色模式
支持摇树优化
