diff --git a/src/packages/textarea/doc.en-US.md b/src/packages/textarea/doc.en-US.md index 4fed75f56c..cedfe0032e 100644 --- a/src/packages/textarea/doc.en-US.md +++ b/src/packages/textarea/doc.en-US.md @@ -107,3 +107,4 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-textarea-text-color | text color | `$color-title` | | \--nutui-textarea-text-curror-color | caret color | `$color-title` | | \--nutui-textarea-disabled-color | disabled color | `$color-text-disabled` | +| \--nutui-textarea-limit-align | text align | `right` | diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md index 829f6d59c3..2bee9f1787 100644 --- a/src/packages/textarea/doc.md +++ b/src/packages/textarea/doc.md @@ -107,3 +107,4 @@ import { TextArea } from '@nutui/nutui-react' | \--nutui-textarea-text-color | 文本颜色 | `$color-title` | | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` | | \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` | +| \--nutui-textarea-limit-align | 对齐方式 | `right` | diff --git a/src/packages/textarea/doc.taro.md b/src/packages/textarea/doc.taro.md index 9040ac8e67..207c50a3a3 100644 --- a/src/packages/textarea/doc.taro.md +++ b/src/packages/textarea/doc.taro.md @@ -107,3 +107,4 @@ import { TextArea } from '@nutui/nutui-react-taro' | \--nutui-textarea-text-color | 文本颜色 | `$color-title` | | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` | | \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` | +| \--nutui-textarea-limit-align | 对齐方式 | `right` | diff --git a/src/packages/textarea/doc.zh-TW.md b/src/packages/textarea/doc.zh-TW.md index eaf6bfb943..56baf708ef 100644 --- a/src/packages/textarea/doc.zh-TW.md +++ b/src/packages/textarea/doc.zh-TW.md @@ -106,3 +106,4 @@ import { TextArea } from '@nutui/nutui-react' | \--nutui-textarea-text-color | 文本顏色 | `$color-title` | | \--nutui-textarea-text-curror-color | 光標顏色 | `$color-title` | | \--nutui-textarea-disabled-color | 禁用顏色 | `$color-text-disabled` | +| \--nutui-textarea-limit-align | 對齊方式 | `right` | diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss index ae1140e1c7..e681c40763 100644 --- a/src/packages/textarea/textarea.scss +++ b/src/packages/textarea/textarea.scss @@ -1,8 +1,9 @@ .nut-textarea { + display: flex; + flex-direction: column; position: relative; width: 100%; box-sizing: border-box; - display: flex; background: $color-background-overlay; font-size: $textarea-font; padding: $textarea-padding; @@ -16,11 +17,9 @@ } &-limit { - position: absolute; - right: 15px; - bottom: 12px; font-size: $textarea-font; color: $textarea-limit-color; + text-align: $textarea-limit-align; } &-textarea { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index c5f68ee5d8..e8964178fd 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -587,6 +587,7 @@ $input-padding: var(--nutui-input-padding, 10px 25px) !default; $textarea-font: var(--nutui-textarea-font, $font-size-base) !default; $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default; $textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default; +$textarea-limit-align: var(--nutui-textarea-limit-align, right) !default; $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default; $textarea-text-curror-color: var( --nutui-textarea-text-curror-color,