项目介绍
uni-ui x,是DCloud为 uni-app x 提供的扩展组件库。
uni-ui x 是全新设计的,与为uni-app做的uni ui不同。
设计原则
-
性能
uni-ui x 非常注重性能,在DOM层级控制、包体积、代码执行时间方面精益求精。
-
完全的自定义样式 - 基于externalClass
传统的组件把样式封装在组件属性上,造成用户需要自定义样式时无限封装属性,并且这些属性的控制无法使用css变量。
如果不能满足自定义需求,就要查看组件内部的类名进行强制覆盖,甚至修改组件源码。
uni-ui x 的所有样式,都不封装在组件属性上,属性只控制逻辑功能。
- 组件的根节点样式,可以在使用组件时的组件class或style上设置。
- 组件的子节点样式,可以通过externalClass设置样式。子组件开放自己的样式出来,外部可通过externalClass进行子组件的样式自定义。
组件使用者完全可以通过css自己控制所有样式。无需修改组件源码。加上css变量加持,灵活度远高于其他组件库。
- 优先代码而不是二进制文件
uni-ui x 目前没有引入字体文件。这处于性能考虑,也出于AI友好度考虑。
以箭头为例,uni-ui x 中使用一个view配置左下边框并transform旋转来实现,这种设计性能比字体更好,且AI可以方便的理解这段代码的UI表现,可以在代码层面调整样式。
如果是字体图片,AI很难生成、也很难理解。
再举一个例子,uni-tab下沉midbutton,涉及一个贝塞尔曲线,此时没有使用图片,而是使用svg,同样是为了方便AI理解和修改。