[Select] 如何设置勾选图标位置

DouyinFE / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click

https://semi.design

Other

8.36k stars 707 forks source link

[Select] 如何设置勾选图标位置 #2327

Closed xmsz-stu closed 3 months ago

xmsz-stu commented 3 months ago

Which Component Need Enhancement 期望新增功能的组件

Select

What does the proposed API look like 期望支持的API

支持配置勾选图标位置，左||右

Feature Description 功能描述

我想实现这样的效果

但通过css覆盖也只能实现这样的效果

那个勾选的图标我希望在右侧，因为这样看起来会平衡一点，且在没有勾选的时候，不会看起来特别奇怪(左边距巨大)

Additional information 补充说明

xmsz-stu commented 3 months ago

还有最小高度，希望也可以设置大一点

pointhalo commented 3 months ago

有renderOptionItem 这个API，可以完全自定义这里的渲染结构的。

pointhalo commented 3 months ago

以及，这里 Option 是 flex 布局。你通过css改变子元素的 order 属性也是能改变前后顺序的。

xmsz-stu commented 3 months ago

以及，这里 Option 是 flex 布局。你通过css改变子元素的 order 属性也是能改变前后顺序的。

嗯，renderOptionItem太麻烦了我现在就是用CSS来覆盖

  .semi-select-option-list {
    min-width: 128px;
  }
 .semi-select-option-text {
    flex-grow: 1;
  }
  .semi-select-option-icon {
    order: 2;
    margin-right: 0;
    margin-left: 8px;
  }

如果能内置就好了，我可以在ConfigProvider里配置最方便

pointhalo commented 3 months ago

无论是css控制还是完全掌控渲染结构，本身都是一个合理的做法。配合css 作用域以及 HOC 封装，两者都能很方便地实现单体或者全局的作用域。

所谓的麻烦与否是一个很主观的事情。能通过现有api实现的，都不会再额外增加其他实现。一方面是如无必要，勿增实体，避免增加后续维护的复杂度。另一方面也是避免对用户产生额外的选择成本。