ColorInput组件继承了TextInput组件的属性和ColorPicker的属性, 本文档没有包含所有的功能, 可以查看TextInput和ColorPicker的文档了解更多功能.
设置disallowInput属性可以禁止用户自由输入
当用户自由输入时, 如果输入的是错误的颜色值, 默认会自动恢复为上一次正确的颜色值. 设置fixOnBlur={false}可以覆盖默认行为, 这会保留不正确的颜色值:
withPicker属性设置为true, 并且不提供swatches属性, 则用户只能通过颜色滑块选择.withPicker属性设置为false, 并且提供swatches属性, 则用户只能在预定义的色板中选择.withPicker属性设置为false, 并且不提供swatches属性, 则下拉不显示.当提供了swatches属性, 默认点击色板不会自动关闭下拉框, 可以设置closeOnColorSwatchClick属性可以覆盖默认行为.
ColorInput组件默认右侧带有拾色器按钮. 它依赖于浏览器的EyeDropper Web API, 检查浏览器的支持, 如果浏览器不支持则不会显示.
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| closeOnColorSwatchClick | boolean | undefined | no | false | Determines whether the dropdown should be closed when one of the color swatches is clicked |
| color | string | undefined | no | ||
| defaultValue | string | undefined | no | Uncontrolled component default value | |
| description | React.ReactNode | no | Contents of <code>Input.Description</code> component. If not set, description is not rendered. | |
| descriptionProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Description</code> component | |
| disabled | boolean | undefined | no | Sets <code>disabled</code> attribute on the <code>input</code> element | |
| disallowInput | boolean | undefined | no | false | If input is not allowed, the user can only pick value with color picker and swatches |
| error | React.ReactNode | no | Determines whether the input should have error styles and <code>aria-invalid</code> attribute | |
| errorProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Error</code> component | |
| fixOnBlur | boolean | undefined | no | true | Determines whether the input value should be reset to the last known valid value when the input loses focusable |
| format | ColorFormat | undefined | no | hex | Color format |
| id | string | undefined | no | Static id used as base to generate <code>aria-</code> attributes, by default generates random id | |
| inputContainer | ((children: ReactNode) => ReactNode) | undefined | no | (children) => children | Input container component |
| inputWrapperOrder | ("input" | "label" | "error" | "description")[] | undefined | no | ['label', 'description', 'input', 'error'] | Controls order of the elements |
| label | React.ReactNode | no | Contents of <code>Input.Label</code> component. If not set, label is not rendered. | |
| labelElement | "div" | "label" | undefined | no | "label" | <code>Input.Label</code> root element |
| labelProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Label</code> component | |
| leftSection | React.ReactNode | no | Content section rendered on the left side of the input | |
| leftSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| leftSectionWidth | Width<string | number> | undefined | no | Left section width, used to set <code>width</code> of the section and input <code>padding-left</code>, by default equals to the input height | |
| multiline | boolean | undefined | no | false | Determines whether the input can have multiple lines, for example when <code>component="textarea"</code> |
| onChange | ((value: string) => void) | undefined | no | Called when value changes | |
| onChangeEnd | ((value: string) => void) | undefined | no | Called when the user stops dragging one of the sliders or changes the value with arrow keys | |
| pointer | boolean | undefined | no | false | Determines whether the input should have <code>cursor: pointer</code> style |
| radius | string | undefined | no | "md" | Key of <code>theme.radius</code> or any valid CSS value to set <code>border-radius</code>, numbers are converted to rem |
| required | boolean | undefined | no | Sets <code>required</code> attribute on the <code>input</code> element | |
| rightSection | React.ReactNode | no | Content section rendered on the right side of the input | |
| rightSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| rightSectionWidth | Width<string | number> | undefined | no | Right section width, used to set <code>width</code> of the section and input <code>padding-right</code>, by default equals to the input height | |
| size | string | undefined | no | Controls input <code>height</code> and horizontal <code>padding</code> | |
| slots | ({ left?: string | undefined; input?: string | undefined; right?: string | undefined; } & { eyeDropper?: string | undefined; }) | undefined | no | ||
| swatches | string[] | undefined | no | An array of colors in one of the supported formats. Used to render swatches list below the color picker. | |
| swatchesPerRow | number | undefined | no | 7 | Number of swatches per row |
| value | string | undefined | no | Controlled component value | |
| variant | "outline" | "default" | "ghost" | undefined | no | "outline" | input variant |
| withAria | boolean | undefined | no | true | Determines whether <code>aria-</code> and other accessibility attributes should be added to the input |
| withAsterisk | boolean | undefined | no | false | Determines whether the required asterisk should be displayed. Overrides <code>required</code> prop. Does not add required attribute to the input. |
| withErrorStyles | boolean | undefined | no | true | Determines whether the input should have red border and red text color when the <code>error</code> prop is set |
| withEyeDropper | boolean | undefined | no | true | Determines whether eye dropper button should be displayed in the right section |
| withPicker | boolean | undefined | no | true | Determines whether the color picker should be displayed |
| withPreview | boolean | undefined | no | true | Determines whether the preview color swatch should be displayed in the left section of the input |
| wrapperProps | Record<string, any> | undefined | no | Props passed down to the root element of the <code>Input</code> component |