allowInput
説明
If true, allows input.
タイプ
booleanデフォルト
trueColorPicker
ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。
Props
ColorPickerProps
alphaSliderProps
説明
Props for the alpha slider component.
タイプ
Omit<AlphaSliderProps, "defaultValue" | "value">alphaSliderRef
説明
Ref for the alpha slider component.
タイプ
type ONLY_FOR_FORMAT =
| ((instance: HTMLInputElement | null) => void)
| MutableRefObject<HTMLInputElement | null>boundary
説明
The boundary area for the popper. Used within the preventOverflow modifier.
タイプ
HTMLElement | "clippingParents" | "scrollParent"デフォルト
'clippingParents'channelProps
説明
Props for the chancel component.
タイプ
Omit<ColorSelectorChannelProps, "channelLabel">channelsProps
説明
Props for the channels component.
タイプ
ColorSelectorChannelsPropscloseOnBlur
説明
If true, the popover will close when you blur out it by clicking outside or tabbing out.
タイプ
booleanデフォルト
truecloseOnEsc
説明
If true, the popover will close when you hit the Esc key.
タイプ
booleanデフォルト
truecloseOnSelectSwatch
説明
If true, the color swatch will be closed when value is selected.
タイプ
booleancolorScheme
説明
The visual color appearance of the component.
タイプ
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "rose" | "pink" | "flashy" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia"colorSelectorColorScheme
説明
ColorScheme for the color selector component.
タイプ
"link" | (string & {}) | "whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | ... 12 more ... | "fuchsia"colorSelectorProps
説明
Props for color selector component.
タイプ
ColorSelectorPropscolorSelectorSize
説明
Size for the color selector component.
タイプ
UIValue<(string & {}) | "sm" | "md" | "lg" | "full">colorSelectorVariant
説明
Variant for the color selector component.
タイプ
UIValue<string & {}>containerProps
説明
Props for color picker container element.
タイプ
Omit<HTMLUIProps<"div">, "children">defaultColor
説明
The initial value of the color selector.
タイプ
stringdefaultIsOpen
説明
If true, the popover will be initially opened.
タイプ
booleandefaultValue
説明
The initial value of the color selector.
タイプ
stringduration
説明
The animation duration.
タイプ
number | Partial<Record<"enter" | "exit", number>>errorBorderColor
説明
The border color when the input is invalid.
タイプ
stringeventListeners
説明
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
タイプ
type ONLY_FOR_FORMAT =
| boolean
| { scroll?: boolean | undefined; resize?: boolean | undefined }デフォルト
trueeyeDropperProps
説明
Props for color eye dropper component.
タイプ
ColorPickerEyeDropperPropsfallbackValue
説明
The fallback value returned when color determination fails.
タイプ
stringflip
説明
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
タイプ
booleanデフォルト
truefocusBorderColor
説明
The border color when the input is focused.
タイプ
stringformat
説明
Color format. For example, hex, rgba, etc.
タイプ
ColorFormatデフォルト
hexaformatInput
説明
A callback function to format the input entered.
タイプ
(value: string) => stringgutter
説明
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
タイプ
UIValue<number>デフォルト
8hueSliderProps
説明
Props for the hue slider component.
タイプ
Omit<HueSliderProps, "defaultValue" | "value">hueSliderRef
説明
Ref for the hue slider component.
タイプ
type ONLY_FOR_FORMAT =
| ((instance: HTMLInputElement | null) => void)
| MutableRefObject<HTMLInputElement | null>inputProps
説明
Props for color picker element.
タイプ
HTMLUIProps<"input">isDisabled
説明
If true, the form control will be disabled.
タイプ
booleanデフォルト
falseisInvalid
説明
If true, the form control will be invalid.
タイプ
booleanデフォルト
falseisLazy
説明
If true, the PopoverContent rendering will be deferred until the popover is open.
タイプ
booleanデフォルト
falseisOpen
説明
If true, the popover will be opened.
タイプ
booleanisReadOnly
説明
If true, the form control will be readonly.
タイプ
booleanデフォルト
falseisRequired
説明
If true, the form control will be required.
タイプ
booleanデフォルト
falselazyBehavior
説明
The lazy behavior of popover's content when not visible. Only works when isLazy={true}
- unmount: The popover's content is always unmounted when not open.
- keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.
タイプ
LazyModeデフォルト
'unmount'matchWidth
説明
If true, the popper will match the width of the reference at all times.
It's useful for autocomplete, date-picker and select patterns.
タイプ
booleanデフォルト
falsemodifiers
説明
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
タイプ
Partial<Modifier<string, any>>[]ドキュメント
https://popper.js.org/docs/v2/modifiers/offset
説明
The main and cross-axis offset to displace popper element from its reference element.
タイプ
[number, number]onChange
説明
Function called whenever the color selector value changes.
タイプ
(value: string) => voidonChangeEnd
説明
Function called when the user is done selecting a new value.
タイプ
(value: string) => voidonChangeStart
説明
Function called when the user starts selecting a new value.
タイプ
(value: string) => voidonClose
説明
Callback fired when the popover closes.
タイプ
() => voidonOpen
説明
Callback fired when the popover opens.
タイプ
() => voidonSwatchClick
説明
Function called whenever the color swatch click.
タイプ
(value: string) => voidplacement
説明
The placement of the popper relative to its reference.
タイプ
UIValue<Placement>デフォルト
'bottom'portalProps
説明
Props to be forwarded to the portal component.
タイプ
Omit<PortalProps, "children">デフォルト
'{ isDisabled: true }'preventOverflow
説明
If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
タイプ
booleanデフォルト
truerelatedRef
説明
The ref of the element related to the popover.
This is used during the onBlur event.
タイプ
RefObject<HTMLElement>saturationSliderProps
説明
Props for the saturation slider component.
タイプ
Omit<SaturationSliderProps, "defaultValue" | "value">saturationSliderRef
説明
Ref for the saturation slider component.
タイプ
type ONLY_FOR_FORMAT =
| ((instance: HTMLInputElement | null) => void)
| MutableRefObject<HTMLInputElement | null>size
説明
The size of the ColorPicker.
タイプ
"xs" | "sm" | "md" | "lg"デフォルト
mdstrategy
説明
The CSS positioning strategy to use.
タイプ
"fixed" | "absolute"デフォルト
'absolute'swatches
説明
An array of colors in one of the supported formats. Used to render swatches list below the color selector.
タイプ
string[]swatchesColumns
説明
Number of swatches grid columns.
タイプ
UIValue<number>デフォルト
7swatchesLabel
説明
The swatches label to use.
タイプ
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortalswatchesProps
説明
Props for the swatches component.
タイプ
ColorSelectorSwatchesPropsswatchProps
説明
Props for color swatch component.
タイプ
ColorSwatchPropsvalue
説明
The value of the color selector.
タイプ
stringvariant
説明
The variant of the ColorPicker.
タイプ
"outline" | "filled" | "flushed" | "unstyled"デフォルト
outlinewithChannel
説明
If true, display the channels component.
タイプ
booleanデフォルト
truewithColorSelectorEyeDropper
説明
If true display the eye dropper component.
タイプ
booleanデフォルト
falsewithEyeDropper
説明
If true, display the eye dropper component.
タイプ
booleanデフォルト
truewithPicker
説明
If true, display the saturation, hue, alpha, channels and eye dropper component.
タイプ
booleanデフォルト
truewithResult
説明
If true, display the result component.
タイプ
booleanデフォルト
falsewithSwatch
説明
If true, display the color swatch component.
タイプ
booleanデフォルト
trueGitHubでこのページを編集する