Tencent / tdesign

Enterprise Design System
https://tdesign.tencent.com
MIT License
3.05k stars 250 forks source link

[Select] 增加横向排列布局模式 #414

Open Wen1kang opened 8 months ago

Wen1kang commented 8 months ago

这个功能解决了什么问题

业务需要使用横向排列,并新增分组能力

image
Wen1kang commented 7 months ago

Select横向排列

腾讯 CoDesign: https://codesign.qq.com/s/GD5OjEyaKqj3eAX 访问密码:GSR7

Figma: https://www.figma.com/file/CDAStUfVuUOExfhDsoClbV/select%E5%A2%9E%E5%8A%A0%E6%A8%AA%E5%90%91%E6%8E%92%E5%88%97?type=design&node-id=105016-1726&mode=design&t=UN4ohwleWUsDaZL9-4

Wen1kang commented 7 months ago

@uyarn @chaishi 麻烦看看

Wen1kang commented 7 months ago

Tree横向排列

腾讯 CoDesign: https://codesign.qq.com/s/zm5q0XpEq70RBb6 访问密码:FDCA

Figma: https://www.figma.com/file/CDAStUfVuUOExfhDsoClbV/select%E5%A2%9E%E5%8A%A0%E6%A8%AA%E5%90%91%E6%8E%92%E5%88%97?type=design&node-id=105016-42035&mode=design&t=UN4ohwleWUsDaZL9-4

chaishi commented 7 months ago

全选位置可能会跟在标题后面,也可能会是第一个选项

image
chaishi commented 7 months ago

API 平台已新增 optionsLayout: 'vertical' | 'horizontal',用于表示下拉选项,横向排列或纵向排列

git clone https://github.com/TDesignOteam/tdesign-api Vue3 执行: npm run api:docs Select "VueNext(PC)" finalProject Vue2 执行: npm run api:docs Select "Vue(PC)" finalProject,useDefault

Wen1kang commented 7 months ago

全选位置可能会跟在标题后面,也可能会是第一个选项 image

全选需要使用这样的布局形式,已经上传codesign和figma

image