组件库的使用和自定义

组件库是一个强大的提效工具，运用的号能够最大程度地提高我们的工作效率，从设计规范到组件库，再到开发还原，组件库搭建了一座桥梁。 本文将从组件库的概率、重要性、构建思维及构建流程等多方面深度解析，希望对大家有所帮助。 在设计系统中，大家最熟悉、最常用的应该就是设计组件了，它包括文字、图标、按钮、输入框、表单…等一系列构成界面的小元素，而这些小元素的结合体就是笔者要讲的组件库。 合理使用组件库能保持界面视觉效果的一致性，让开发高度还原，还为业务带来一致的设计语言，大大提高了团队的工作效率。

组件库介绍

组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，將这些组件整理在一起，便形成组件库。

组件库的使用

组件库的优点

组件库帮助我们节省因重复设计产生的工作时间，让我们更专注于用户体验和对产品的创新。

1.保持视觉风格统一 

一个产品必然有其固有的品牌基调和品牌倾向性，不同的设计样式会给产品带来不同的调性，为了保持产品视觉风格统一，设计师应该建立组件库，制定设计规范，统一设计样式。

2.保持交互一致性 

交互的一致性，可以减少用户学习成本培养用户习惯，让产品拥有良好的用户体验。比如一个日期的选择组件，在整个产品中应该就一种交互方式，如果一会是滚动，一会是下拉，会让用户操作起来比较烦躁。

3.组件快速构建使用场景

将组件视为一个独立的产品，从多维度，多场景输出组件的方案和组合标准，在组件设计过程中，我们进行更完整全面的思考，产出更能灵活适应不同场景的方案。

4.便于多个项目后续迭代升级 

新产品上线后，还需要不断的去完善，在迭代过程中可能会新增其他功能，就需要在现有组件上进行补充升级。

arco design

Arco Design 基于 Byte Design 升级而来，是能力全面的企业级产品设计系统。目标是通过通用的设计系统去解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题，同时它能够促进设计部门和研发部门之间协作, 成为开发者之间沟通的语言。

LESS变量

1.Less是一门css的预处理语言，less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式

变量名以两条短横线命名

2.Less特点：

less的语法大致和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行。

组件设计

单一的视觉不再满足用户体验需求，为提高用户体验，提高应用体验口碑，同时提高开发者效率，我们希望提高组件库的可定制化，因此提供换肤功能以及多种类组件中的样式定制功能，允许用户将应用切换不同主题风格的皮肤，也允许开发者对指定组件进行样式改造。

性能

一个方案的落地前提得有性能的保障，不重新初始化视图，避免出现闪屏、卡顿等性能缺陷现象，同时也要保障功能稳定，不能存在部分组件不按预期切换主题现象。

可维护性

组件库需不断迭代完善，应避免过多的条件判断，避免在单个组件上有过多的主题特殊逻辑，主题的设置和组件的实现应解耦，保证后续可维护可扩展。

可配置

可配置分为两部分，一部分为可配置任意全局统一的样式变量，或者某个组件的局部样式；另一部分为强制模式，即指定部分组件不跟随主题变化而变化，保留着本身一种样式。

易用性

提供快捷接入主题的接口，降低学习成本和时间成本。

粒度细分

组件层面的主题定制、整套组件库的主题定制。开发者可以修改全局样式，比如更换全局中字号的字体大小，也可以局部修改样式，比如按钮组件A的边框颜色。

LRT视图实现浅析

CSS 属性

元素方向RTL

direction： rtl；（用来设置文本和其他元素的默认方向是从右到左）margin-left =>margin-right

span.arco-checkbon

spanarco-checkb

布局 RTL

position:right=>position:left

CheckbE

Checkbok

交互行为RTL

Slider 组件

向左拖动数值变小＝＞向右拖动数值变小左还是左，右还是右

其他处理

Notification 设置为 right 弹出时，无论在 RTL 还是 LTR，都是出现在右上角

自定义组件

搭建业务组件库

1.单包架构

2.多包架构

3.技术方案

4.对外文档

什么是好的组件？

高内聚，低耦合

松耦合的好处：

• 当组件改变时不会影响其他组件
• 任何一个组件都可以被即时替换
• 提高单一组件在系统的可复用性
• 独立组件很方便被测试
• 隐藏组件信息

通用性，易拓展

基础组件适用广泛的业务场景比如金融，电商，政务等业务平台业务组件适用于针对性平台 具备显著的业务属性，一般基于基础组件开发。比如：通过关键字调接口搜索Lark 群聊

项目好坏区分

1.语义化命名 组建的命名应当具有语义性，并且避免与基础组件冲突，同一团队的业务组件，也可采用相同的命名前缀。 2.包名和组件名应一致 NPM包名应当尽量与组件名保持一致，包含明确的场景使用信息。 3.单独维护类型文件 推荐将需要对外导出 的TS类型维护在单独的interedace。ts中，并将其在index.ts中导出。

组件设计的好坏

1.接口定义

2.类名前缀统一

3.避免行内样式和CSSmodules

4.避免在js中直接引入样式文件

5.注意组件样式的按需加载

课程总结和答疑

组件库使用

自定义组件开发

✓组件库引入

✓单包架构和多包架构

✓主题定制

什么是好的组件

亮／暗色模式切换

✓组件开发规范

✓国际化

✓组件快速托管

自定义组件默认配置