vue-devui
vue-devui copied to clipboard
🐛 [Bug]: Button、Search、Input、InputNumber、InputIcon、Select等支持设置size的组件标准不一
Version
v1.0.0-rc.11
Vue Version
3.2.29
Link to minimal reproduction
xs | sm | md | lg | |
---|---|---|---|---|
Button |
20px | 24px | 32px | 36px |
Search |
无 | 26 px | 32px | 46px |
Input |
无 | 24px | 26px | 44px |
InputNumber |
无 | 26px | 28px | 46px |
InputIcon |
无demo? | 无demo? | 无demo? | 无demo? |
Select |
无 | 22px | 26px | 42px |
Radio |
28px | 32px | 36px | 40px |
Checkbox |
28px | 32px | 36px | 40px |
AutoComplete |
无 | 26px | 32px | 46px |
DatePickerPro |
无 | 26px | 28px | 46px |
Form |
无 | 待补充 | 待补充 | 待补充 |
Icon |
无 | 待补充 | 待补充 | 待补充 |
Pagination |
无 | 待补充 | 待补充 | 待补充 |
Skeleton |
无 | 待补充 | 待补充 | 待补充 |
Switch |
无 | 待补充 | 待补充 | 待补充 |
Table |
无 | 待补充 | 待补充 | 待补充 |
Tag |
无 | 待补充 | 待补充 | 待补充 |
ant-design | 无 | 24px | 32px | 40px |
Element-plus | 无 | 与antd相同 | 与antd相同 | 与antd相同 |
Step to reproduce
使用这些组件
What is expected
- 建议xs、 sm 、md、lg使用标准的尺寸
- 建议这些将组件的尺寸使用公共的sass变量
- 建议参考社区主流的尺寸
- 考虑移除xs这个尺寸、或都都支持xs
What is actually happening
大小不一,标准不同
Any additional comments (optional)
No response
赞成!
是否可以考虑移除 md 把 md 直接作为默认
是否可以考虑移除 md 把 md 直接作为默认
md作为默认,但不移除比较合理,保留md可以显式表明默认到底是什么
建议将这三个尺寸抽成三个scss变量,统一使用,方便后续设计规范变更之后,修改起来方便。
$devui-size-sm: 24px;
$devui-size-md: 32px;
$devui-size-lg: 40px;
2022-09-17 Button Search Input InputNumber Select Radio Checkbox AutoComplete DatePickerPro Pagination Tag 移除size xs类型
Icon、Skeleton、Table 的size 属性应该是独立的吧 和表单没有关系 @linxiang07 @kagol
通过检查发现,
- checkbox、select、switch组件中获取size的优先级顺序为from > group > props,与其他form组件的优先级顺序不一致,实际上应该是props > group > from比较合理。
- input组件未设置默认样式为md,会影响html上没有默认size对应class。 看大佬在radio组件中修改了以上的问题,看下继续对上面组件进行修改,获取我这边修改后提pr也可以。 @vaebe
通过检查发现,
- checkbox、select、switch组件中获取size的优先级顺序为from > group > props,与其他form组件的优先级顺序不一致,实际上应该是props > group > from比较合理。
- input组件未设置默认样式为md,会影响html上没有默认size对应class。 看大佬在radio组件中修改了以上的问题,看下继续对上面组件进行修改,获取我这边修改后提pr也可以。 @vaebe 非常感谢
- checkbox、switch 已经提pr了,select 还没看 大佬有时间可以修一下
- input 没有
.devui-input--md
这个 class 和 scss 样式写的有关系,目前逻辑应该正确的。
通过检查发现,
- checkbox、select、switch组件中获取size的优先级顺序为from > group > props,与其他form组件的优先级顺序不一致,实际上应该是props > group > from比较合理。
- input组件未设置默认样式为md,会影响html上没有默认size对应class。 看大佬在radio组件中修改了以上的问题,看下继续对上面组件进行修改,获取我这边修改后提pr也可以。 @vaebe 非常感谢
- checkbox、switch 已经提pr了,select 还没看 大佬有时间可以修一下
- input 没有
.devui-input--md
这个 class 和 scss 样式写的有关系,目前逻辑应该正确的。
select已提pr
Fixed by @vaebe and @hxj9102 🎉