Skip to content

feat(ColorPicker): add input-less trigger style #2625

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

Open
LiamFan16-mikasa wants to merge 1 commit into
base: develop
Choose a base branch
from
+50 −0
Open

feat(ColorPicker): add input-less trigger style #2625

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/color-picker.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 6 additions & 0 deletions docs/web/api/color-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ spline: form

{{ trigger }}

### 无文字输入框的颜色选择器

设置 `isInput=false`，触发器仅展示颜色色块，隐藏色值输入框，适用于不需要直接编辑色值、只通过面板选择颜色的场景。

{{ input-less }}

### 不同色彩模式的颜色选择器

支持单色模式、线性渐变两种颜色模式选择，可单独一种模式使用，也可同时两种模式切换。使用 `colorModes` 进行配置。
Expand Down
26 changes: 26 additions & 0 deletions style/web/components/color-picker/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 12 additions & 0 deletions style/web/components/color-picker/_var.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);