diff --git a/docs/web/api/tag-input.en-US.md b/docs/web/api/tag-input.en-US.md index 19d12b31ab..350feabe92 100644 --- a/docs/web/api/tag-input.en-US.md +++ b/docs/web/api/tag-input.en-US.md @@ -16,6 +16,12 @@ Use `excessTagsDisplayType` to control the rendering method when the tag exceeds {{ excess }} +### Maximum Number of Rows When Tags Exceed Limit + +Use `maxRows` to control the maximum number of rows when tags exceed the limit. A scrollbar will appear when the number of rows exceeds this limit. By default, there is no limit. + +{{ max-row }} + ### Tag input box with limited number Use `max` to control the maximum number of tags. diff --git a/docs/web/api/tag-input.md b/docs/web/api/tag-input.md index c5bbafb8c4..ebc0ef25a3 100644 --- a/docs/web/api/tag-input.md +++ b/docs/web/api/tag-input.md @@ -16,6 +16,11 @@ spline: data {{ excess }} +### 标签数量超出后限制最大行数的输入框 + +使用 maxRows 控制标签超出时的最大行数,超出会出现滚动条,默认为不限制。 + +{{ max-row }} ### 有数量限制的标签输入框 @@ -43,7 +48,6 @@ spline: data {{ custom-tag }} - ### 不同状态的标签输入框 标签输入框状态可分为:正常、只读、禁用、成功、告警、错误等,其中 成功、告警、错误 等状态一般用于表单验证。此特性继承至 Input 输入框组件。 @@ -61,4 +65,5 @@ spline: data {{ auto-width }} ### 可拖拽调整顺序的标签输入框 + {{ draggable }} diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index ee503fee4a..3c51949a02 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -141,3 +141,19 @@ padding-right: 0; } } + +/** max-rows模式,限制最大高度 */ +.@{prefix}-tag-input--max-rows { + .@{prefix}-input { + &.@{prefix}-size-s { + max-height: calc(var(--max-rows, 1) * @tag-input-height-s); + } + + &.@{prefix}-size-l { + max-height: calc(var(--max-rows, 1) * (@tag-input-height-l - 2px)); + } + + max-height: calc(var(--max-rows, 1) * (@tag-input-height-default - 2px)); + overflow-y: scroll; + } +}