2023-03-15 15:40:54 +08:00
|
|
|
### 开发规范
|
|
|
|
|
|
|
|
|
|
1. 主题(light, dark)
|
|
|
|
|
> 主题功能, 暂时由根样式定义来实现, 所以, 组件内的样式, 尽可能避免过多的私有配色。
|
|
|
|
|
|
|
|
|
|
2. 组件几种配色样式, 暂时同大多数组件一致
|
2023-03-16 13:56:32 +08:00
|
|
|
- `type=primary` 青色 (默认值)
|
2023-03-15 15:40:54 +08:00
|
|
|
- `type=secondary` 暗色
|
|
|
|
|
- `type=info` 蓝色
|
|
|
|
|
- `type=success` 绿色
|
|
|
|
|
- `type=warning` 橙色
|
2023-03-15 19:38:37 +08:00
|
|
|
- `type=danger` 红色
|
2023-03-15 15:40:54 +08:00
|
|
|
- `type=help` 灰色
|
|
|
|
|
|
|
|
|
|
3. 尺寸, 主要指 高度
|
2023-03-30 19:04:30 +08:00
|
|
|
> 需要注意的是, 这里的高度, 仅为组件本身应该占的高度, 而非"可视内容"的真实高度, 比如 开关按钮, 实际上就可以不需要那么大。
|
2023-03-15 15:40:54 +08:00
|
|
|
|
|
|
|
|
- `size=s` 小号, 20px
|
|
|
|
|
- `size=m` 中号, 24px
|
|
|
|
|
- `size=l` 大号, 32px (默认值)
|
|
|
|
|
- `size=xl` 加大号, 36px
|
|
|
|
|
- `size=xxl` 加加大号, 44px
|
|
|
|
|
|
|
|
|
|
4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑
|
2023-08-03 15:47:02 +08:00
|
|
|
> 统一为增加 `lazy="1000"` 属性实现
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
5. 暗色主题
|
|
|
|
|
各组件, 需要适配暗色主题。
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
// ...
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
6. 组件的额外自定义样式, 尽量使用css变量来做穿透
|
|
|
|
|
各组件的穿透样式变量名, 需要带命名空间
|
|
|
|
|
|
|
|
|
|
```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);
|
|
|
|
|
...
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
```
|
