Skip to content

[t-checkbox][t-radio] 实际显示选中态和未选中态直径/边长大小不一致,与设计稿不符,且预设 checkbox 矩形样式为直角矩形也与设计稿圆角矩形不符 #3068

Description

@ArcticFoxPro

tdesign-miniprogram 版本

1.5.1

重现链接

TDesign 官方 Demo 即可复现

重现步骤

不存在特定的重现步骤即可广泛复现。

期望结果

t-checkbox、t-radio 实际显示选中态和未选中态直径/边长大小一致,且预设 checkbox 矩形样式为圆角矩形(与设计稿一致)

实际结果

t-checkbox、t-radio 实际显示选中态和未选中态直径/边长大小不一致,且预设 checkbox 矩形样式为直角矩形(与设计稿不符)

TDch框架@3x

基础库版本

3.5.3

补充说明

No response

Activity

  1. github-actions commented on Aug 13, 2024

    @github-actions
    Contributor

    👋 @ArcticFoxPro,感谢给 TDesign 提出了 issue。
    请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

  2. changed the title [-][t-checkbox][t-radio] 实际显示选中态和未选中态直径/边长大小不一致,与设计稿不符[/-] [+][t-checkbox][t-radio] 实际显示选中态和未选中态直径/边长大小不一致,与设计稿不符,且预设 checkbox 矩形样式为直角矩形也与设计稿圆角矩形不符[/+] on Aug 13, 2024
  3. anlyyao commented on Aug 13, 2024

    @anlyyao
    Collaborator

    @ArcticFoxPro 细致 👍,感谢反馈,我们处理一下

  4. anlyyao commented on Aug 13, 2024

    @anlyyao
    Collaborator

    @ArcticFoxPro 后续设计稿中icon会直接使用 icon组件中内置图标,具体以icon组件图标为准

  5. ArcticFoxPro commented on Aug 13, 2024

    @ArcticFoxPro
    ContributorAuthor

    @ArcticFoxPro 后续设计稿中icon会直接使用 icon组件中内置图标,具体以icon组件图标为准

    我注意到 https://tdesign.gtimg.com/mobile/demos/checkbox-checked.png 和 https://tdesign.gtimg.com/mobile/demos/checkbox.png 从原来的圆角矩形在今天被替换成了直角矩形,这是设计最新意见吗?

    Screenshot_2024-08-13-19-00-21-320_com.tencent.mm-edit.jpg

    Demo 还需要单独的深色 Primary 颜色。

  6. anlyyao commented on Aug 13, 2024

    @anlyyao
    Collaborator

    @ArcticFoxPro 后续设计稿中icon会直接使用 icon组件中内置图标,具体以icon组件图标为准

    我注意到 https://tdesign.gtimg.com/mobile/demos/checkbox-checked.png 和 https://tdesign.gtimg.com/mobile/demos/checkbox.png 从原来的圆角矩形在今天被替换成了直角矩形,这是设计最新意见吗?

    是的,后续设计稿会直接使用icon组件的内置图标,样式与icon组件保持一致。 你勾出的那块属于自定义图片,是固定的image,不会再单独提供深色模式的图片资源

  7. anlyyao commented on Aug 13, 2024

    @anlyyao
    Collaborator
    企业微信截图_3ee60cdb-1ff0-43c1-b4af-9ac182126e46
  8. ArcticFoxPro commented on Aug 24, 2024

    @ArcticFoxPro
    ContributorAuthor

    在 TD MP 1.6.0 版本中,Radio 的 dot 样式,仍然存在选中态直径小于未选中态的问题。

  9. ArcticFoxPro commented on Aug 24, 2024

    @ArcticFoxPro
    ContributorAuthor

    在 TD MP 1.6.0 版本中,Radio 和 Checkbox 的默认样式的未选中态,描边圆形粗细不一致

  10. anlyyao commented on Oct 20, 2026

    @anlyyao
    Collaborator

    @ArcticFoxPro npm i https://pkg.pr.new/tdesign-miniprogram@4680 可以先装这个包进行验收。

    「选中态直径小于未选中态的问题」是因为选中态使用的是TDesign Icon 字体图标,未选中态是css 绘制,导致两边没有完全对齐,针对这个问题也在 #4680 中有的处理了一轮,但这不是最终/最优方案,需要和设计同学确认是否使用图标实现还是全部自行绘制

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐞 bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions