Skip to content

feat(Textarea): add clearable styles to support clearing content#2608

Open
zjh0326 wants to merge 2 commits into
Tencent:developfrom
zjh0326:feature/textarea-clearable
Open

feat(Textarea): add clearable styles to support clearing content#2608
zjh0326 wants to merge 2 commits into
Tencent:developfrom
zjh0326:feature/textarea-clearable

Conversation

@zjh0326

@zjh0326 zjh0326 commented Jul 3, 2026

Copy link
Copy Markdown
  • Add design tokens for clear button in _var.less
  • Add clear button styles in _index.less
  • Support hover and active states
  • Support dark mode with semantic variables

Close #2566

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

💡 需求背景和解决方案

问题背景

Textarea 组件目前没有清空按钮,用户需要手动全选删除,操作繁琐。与 Input 组件的 clearable 功能不一致,用户体验割裂。

解决方案

为 Textarea 组件添加清空按钮的样式支持,包括:

  1. 设计令牌(_var.less

    • @textarea-clear-color:按钮默认颜色
    • @textarea-clear-color-hover:按钮悬停颜色
    • @textarea-clear-bg-color-hover:按钮悬停背景色
    • @textarea-clear-bg-color-active:按钮点击背景色
    • @textarea-clear-padding-right:输入框右侧内边距
  2. 组件样式(_index.less

    • 按钮尺寸:32x32px
    • 按钮位置:绝对定位在输入框右上角
    • 悬停效果:颜色变化 + 背景高亮
    • 点击效果:缩放 scale(0.88) + 背景加深
    • 支持深色模式:使用语义化 CSS 变量

API 变化

无(本 PR 只涉及样式,API 在 tdesign-vue-next 中定义)

视觉效果

  • 默认状态:浅灰色图标
  • 悬停状态:蓝色图标 + 圆形背景高亮
  • 点击状态:按压缩放 + 背景加深
  • 深色模式:自动适配(使用 CSS 变量)

效果演示

白天模式:
白天模式
夜间模式:
夜间模式

📝 更新日志

  • feat(Textarea): 添加清空按钮样式支持

    • 新增设计令牌:@textarea-clear-*
    • 新增样式类:.t-textarea__clear
    • 支持悬停和点击状态
    • 支持深色模式
  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充(本 PR 只涉及样式)
  • Changelog 已提供或无须提供

- Add design tokens for clear button in _var.less
- Add clear button styles in _index.less
- Support hover and active states
- Support dark mode with semantic variables

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Textarea] 增加可清空内容

2 participants