Skip to content

feat(textarea): add clearable styles and docs #2613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
LiamFan16-mikasa wants to merge 1 commit into from
+41 −0
Closed

feat(textarea): add clearable styles and docs #2613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/web/api/textarea.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,9 @@ You can bind DOM native events such as `onKeypress` `onKeydown` `onKeyup` `onFoc
The status of the multi-line text boxes can be Normal, Disabled, Abnormal (with prompt), prompt with additional content.

{{ type }}

### Clearable Multiline Text Box

A multi-line text box with a clear action to quickly clear the entered content.

{{ clearable }}
6 changes: 6 additions & 0 deletions docs/web/api/textarea.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,9 @@ spline: form
多行文本框状态可分为：正常、禁用、异常、带额外内容提示。

{{ type }}

### 可清空的多行文本框

带清空操作的多行文本框，可快捷清空输入过的内容。

{{ clearable }}
23 changes: 23 additions & 0 deletions style/web/components/textarea/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,29 @@
color: @textarea-limit-color;
}

// 可清空状态下，为清空图标预留空间，避免文字与图标重叠
&--clearable {
.@{prefix}-textarea__inner {
padding-right: calc(@comp-paddingLR-s + @comp-size-xs);
}
}

// 清空图标：Textarea 的 Vue 实现通过 JS（isHover + v-if）控制显隐，
// 因此这里只需要处理图标本身的定位、颜色与交互态，无需像 Input 一样通过 opacity/visibility 控制显隐
&__clear {
position: absolute;
top: @textarea-clear-icon-position-top;
right: @textarea-clear-icon-position-right;
color: @textarea-clear-icon-color;
cursor: pointer;
line-height: 1;
transition: color @anim-time-fn-easing @anim-duration-base;

&:hover {
color: @textarea-clear-icon-color-hover;
}
}

.@{prefix}-is-disabled {
color: @textarea-color-text-disabled;
background-color: @textarea-bg-color-disabled;
Expand Down
6 changes: 6 additions & 0 deletions style/web/components/textarea/_var.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,9 @@
@textarea-box-shadow-color-error-focus: @error-color-focus;

@textarea-border-radius: @border-radius-default;

// 清空图标
@textarea-clear-icon-color: @text-color-placeholder;
@textarea-clear-icon-color-hover: @text-color-secondary;
@textarea-clear-icon-position-top: @comp-margin-s;
@textarea-clear-icon-position-right: @comp-margin-s;