功能UI组件的规范
https://standard-components.com
UI组件库有各种形状和大小。该规范旨在作为标准化命名惯例和Prop API的一种方式,以创建一个可互换的UI组件的生态系统并鼓励更大的代码可重复使用。
为了创建可互换UI组件的库,应使用以下命名约定。此列表有意受到限制,是作为演示的起点。随着时间的推移,可能会添加更多组件。
盒子组件是一种原始的盒子模型布局组件,可处理边距,填充,宽度和其他布局样式。
Flex组件是具有特定于Flexbox特定属性的框组件的扩展。
文本组件是一种原始的印刷组件,可处理字体尺寸,重量,线路高度,对齐方式和其他印刷样式。
标题组件是针对标题的文本组件的扩展。
图像组件是显示图像的内容组件。
背景图是包装盒组件的扩展,其中包含用于显示背景图像的道具。
按钮组件是一种交互式组件,其样式看起来像一个按钮。
链接组件是用于导航的交互式组件。
样式道具是CSS之上的高级抽象,旨在灵活性并帮助解决均类样式问题。样式道具主要基于CSS属性,并带有用于边距和填充的速记道具。
一些组件(例如按钮)使用样式变体来渲染不同的版本,例如primary secondary按钮样式。变体应使用variant支柱,并带有用于primary和secondary变体的速记布尔式道具。
请参阅道具。
主题是定义样式道具使用的值的对象。主题可确保一致的边距,填充,颜色,字体大小和其他UI常数。
查看主题以获取更多信息。
通过遵守严格的组件类型结构,系统中的组件可能与一个奇异的目的有关,并允许在库之间具有更大的互换性。
布局组件控制宽度,高度和间距。他们不尝试控制排版或其他考虑因素。
印刷成分与字体家族,大小,重量,领先,跟踪和其他属性有关。印刷成分与布局无关。
内容组件显示诸如图像,视频和图表之类的内容,而不会影响布局,排版或其他样式问题。
交互式元素(例如链接,按钮和表单元素)需要用户输入,并且通常不处理布局或印刷问题。
样式组件处理其他UI样式,例如边界,半径,阴影和渐变,而不会影响布局或版式。
位置组件将其孩子从正常文档流中删除,应谨慎使用。
由Compositor制作| github |麻省理工学院许可证