ui/开发规范.md

开发规范

1. 主题(light, dark)

主题功能, 暂时由根样式定义来实现, 所以, 组件内的样式, 尽可能避免过多的私有配色。

2. 组件几种配色样式, 暂时同大多数组件一致

• type=primary 青色
• type=info 蓝色
• type=success 绿色
• type=warning 橙色
• type=danger 红色

3. 尺寸, 主要指 高度

从事多年前端开发的经验来看, 业务中很少会用到使用组件内置的尺寸的, 最多就是常规尺寸和小一号的尺寸。再特殊的情况, 内置的尺寸也满足不了, 始终需要自定义尺寸。

所以本UI库, 不再定义过多的尺寸, 极大的减少了样式所占用的体积.

• size=small 小号, 24px
• size=normal 常规, 32px (默认值, 不用配置)

4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑

统一为增加 lazy="1000" 属性实现

5. 暗色主题 各组件, 需要适配暗色主题。

@media (prefers-color-scheme: dark) {
  // ...
}

6. 组件的额外自定义样式, 尽量使用css变量来做穿透 各组件的穿透样式变量名, 需要带命名空间

// 外部定义
...
--wc-button-border-color: #f30;
...

// 内部实现

button {
  ...
  border: 1px solid var(--wc-button-border-color, var(--color-plain-1));
  // or
  border: 1px solid var(--wc-button-border-color, #f2f5fc);
  ...
}