From 6fdec87586b8069b8efdc94375813b3319d317b1 Mon Sep 17 00:00:00 2001 From: Liam Fan Date: Sun, 19 Jul 2026 01:36:17 -0500 Subject: [PATCH] feat(ColorPicker): add input-less trigger style --- docs/web/api/color-picker.en-US.md | 6 +++++ docs/web/api/color-picker.md | 6 +++++ style/web/components/color-picker/_index.less | 26 +++++++++++++++++++ style/web/components/color-picker/_var.less | 12 +++++++++ 4 files changed, 50 insertions(+) diff --git a/docs/web/api/color-picker.en-US.md b/docs/web/api/color-picker.en-US.md index 1423c7ba06..4e725b0aa3 100644 --- a/docs/web/api/color-picker.en-US.md +++ b/docs/web/api/color-picker.en-US.md @@ -18,6 +18,12 @@ Trigger the display selector panel through the trigger, and transparently transf {{ trigger }} +### Input-less Color Picker + +Set `isInput=false` to display only the color block in the trigger and hide the color value input, for scenarios where the color is selected only through the panel. + +{{ input-less }} + ### Color selector for different color modes Support monochrome mode, linear gradient two color mode selection, can be used in a single mode, can also switch between two modes at the same time. Use `colorModes` to configure. diff --git a/docs/web/api/color-picker.md b/docs/web/api/color-picker.md index d78785a147..b7e5e0c53b 100644 --- a/docs/web/api/color-picker.md +++ b/docs/web/api/color-picker.md @@ -18,6 +18,12 @@ spline: form {{ trigger }} +### 无文字输入框的颜色选择器 + +设置 `isInput=false`，触发器仅展示颜色色块，隐藏色值输入框，适用于不需要直接编辑色值、只通过面板选择颜色的场景。 + +{{ input-less }} + ### 不同色彩模式的颜色选择器 支持单色模式、线性渐变两种颜色模式选择，可单独一种模式使用，也可同时两种模式切换。使用 `colorModes` 进行配置。 diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less index 2d04f49448..f72a69cd0b 100644 --- a/style/web/components/color-picker/_index.less +++ b/style/web/components/color-picker/_index.less @@ -549,6 +549,32 @@ } } } + + // 无文字输入框形态：仅展示颜色色块，隐藏色值文字，不影响其他交互 + &--input-less { + .@{prefix}-input, + .@{prefix}-input--auto-width { + min-width: @color-picker-trigger-input-less-min-width; + padding: @color-picker-trigger-input-less-padding; + } + + .@{prefix}-input.@{prefix}-size-s { + min-width: @color-picker-trigger-input-less-min-width-s; + } + + .@{prefix}-input.@{prefix}-size-l { + min-width: @color-picker-trigger-input-less-min-width-l; + } + + // 提高特异性以覆盖 input 组件的 `.t-input .t-input__prefix:not(:empty)` 规则 + .@{prefix}-input .@{prefix}-input__prefix:not(:empty) { + margin-right: 0; + } + + .@{prefix}-input__inner { + display: none; + } + } } .@{prefix}-color-picker__gradient-slider { diff --git a/style/web/components/color-picker/_var.less b/style/web/components/color-picker/_var.less index c694097f17..e14ddba2c2 100644 --- a/style/web/components/color-picker/_var.less +++ b/style/web/components/color-picker/_var.less @@ -69,3 +69,15 @@ @color-picker-trigger-input-color-inner-size: calc(@comp-size-xs - 2px); @color-picker-trigger-input-color-inner-size-s: calc(@comp-size-xxs - 2px); @color-picker-trigger-input-color-inner-size-l: calc(@comp-size-s - 2px); + +// trigger input-less（无文字输入框形态）：色块居中，左右对称 padding +@color-picker-trigger-input-less-padding: 0 @comp-paddingLR-xs; +@color-picker-trigger-input-less-min-width: calc( + @color-picker-trigger-input-color-inner-size + @comp-paddingLR-xs * 2 + 2px +); +@color-picker-trigger-input-less-min-width-s: calc( + @color-picker-trigger-input-color-inner-size-s + @comp-paddingLR-xs * 2 + 2px +); +@color-picker-trigger-input-less-min-width-l: calc( + @color-picker-trigger-input-color-inner-size-l + @comp-paddingLR-xs * 2 + 2px +);