ColorPicker

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

ソース @yamada-ui/color-picker

Props

ColorPickerProps

説明

If true, allows input.

タイプ

boolean

デフォルト

true

説明

Props for the alpha slider component.

タイプ

Omit<AlphaSliderProps, "defaultValue" | "value">

説明

Ref for the alpha slider component.

タイプ

type ONLY_FOR_FORMAT =
| ((instance: HTMLInputElement | null) => void)
| MutableRefObject<HTMLInputElement | null>

説明

The animation of the popover.

タイプ

デフォルト

'scale'

説明

The boundary area for the popper. Used within the preventOverflow modifier.

タイプ

HTMLElement | "clippingParents" | "scrollParent"

デフォルト

'clippingParents'

説明

Props for the chancel component.

タイプ

Omit<ColorSelectorChannelProps, "channelLabel">

説明

Props for the channels component.

タイプ

ColorSelectorChannelsProps

説明

The number of delay time to close.

タイプ

number

デフォルト

200

説明

If true, the popover will close when you blur out it by clicking outside or tabbing out.

タイプ

boolean

デフォルト

true

説明

If true, the popover will close when you hit the Esc key.

タイプ

boolean

デフォルト

true

説明

If true, the color swatch will be closed when value is selected.

タイプ

boolean

説明

The visual color appearance of the component.

タイプ

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

説明

ColorScheme for the color selector component.

タイプ

ThemeColorScheme

説明

Props for color selector component.

タイプ

ColorSelectorProps

説明

Size for the color selector component.

タイプ

UIValue<"lg" | "md" | "sm" | ({} & string) | "full">

説明

Variant for the color selector component.

タイプ

UIValue<{} & string>

説明

Props for color picker container element.

タイプ

Omit<HTMLUIProps, "children">

説明

The initial value of the color selector.

タイプ

string

説明

If true, the popover will be initially opened.

非推奨

Use defaultOpen instead

タイプ

boolean

説明

If true, the popover will be initially opened.

タイプ

boolean

説明

The initial value of the color selector.

タイプ

string

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

説明

The border color when the input is invalid.

タイプ

string

説明

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

タイプ

type ONLY_FOR_FORMAT =
| boolean
| { resize?: boolean | undefined; scroll?: boolean | undefined }

デフォルト

true

説明

Props for color eye dropper component.

タイプ

ColorPickerEyeDropperProps

説明

The fallback value returned when color determination fails.

タイプ

string

説明

Props for color picker field element.

タイプ

Omit<ColorPickerFieldProps, "children" | "inputProps">

説明

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

タイプ

boolean

デフォルト

true

説明

The border color when the input is focused.

タイプ

string

説明

Color format. For example, hex, rgba, etc.

タイプ

ColorFormat

デフォルト

hexa

説明

A callback function to format the input entered.

タイプ

(value: string) => string

説明

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

タイプ

UIValue<number>

デフォルト

8

説明

Props for the hue slider component.

タイプ

Omit<HueSliderProps, "defaultValue" | "value">

説明

Ref for the hue slider component.

タイプ

type ONLY_FOR_FORMAT =
| ((instance: HTMLInputElement | null) => void)
| MutableRefObject<HTMLInputElement | null>

説明

Props for color picker input element.

タイプ

HTMLUIProps<"input">

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

非推奨

Use invalid instead.

タイプ

boolean

デフォルト

false

説明

If true, the PopoverContent rendering will be deferred until the popover is open.

非推奨

Use lazy instead

タイプ

boolean

デフォルト

false

説明

If true, the popover will be opened.

非推奨

Use open instead

タイプ

boolean

説明

If true, the form control will be readonly.

非推奨

Use readOnly instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

非推奨

Use required instead.

タイプ

boolean

デフォルト

false

説明

If true, the PopoverContent rendering will be deferred until the popover is open.

タイプ

boolean

デフォルト

false

説明

The lazy behavior of popover's content when not visible. Only works when lazy={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'

説明

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

デフォルト

false

説明

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/

説明

The main and cross-axis offset to displace popper element from its reference element.

タイプ

[number, number]

説明

Function called whenever the color selector value changes.

タイプ

(value: string) => void

説明

Function called when the user is done selecting a new value.

タイプ

(value: string) => void

説明

Function called when the user starts selecting a new value.

タイプ

(value: string) => void

説明

Callback fired when the popover closes.

タイプ

() => void

説明

Callback fired when the popover opens.

タイプ

() => void

説明

Function called whenever the color swatch click.

タイプ

(value: string) => void

説明

If true, the popover will be opened.

タイプ

boolean

説明

The number of delay time to open.

タイプ

number

デフォルト

200

説明

The placement of the popper relative to its reference.

タイプ

UIValue<Placement>

デフォルト

'bottom'

説明

Props to be forwarded to the portal component.

タイプ

Omit<PortalProps, "children">

デフォルト

'{ disabled: true }'

説明

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

タイプ

boolean

デフォルト

true

説明

Props for the saturation slider component.

タイプ

Omit<SaturationSliderProps, "defaultValue" | "value">

説明

Ref for the saturation slider component.

タイプ

type ONLY_FOR_FORMAT =
| ((instance: HTMLInputElement | null) => void)
| MutableRefObject<HTMLInputElement | null>

説明

The size of the ColorPicker.

タイプ

"xs" | "sm" | "md" | "lg" | "xl"

デフォルト

"md"

説明

The CSS positioning strategy to use.

タイプ

"fixed" | "absolute"

デフォルト

'absolute'

説明

An array of colors in one of the supported formats. Used to render swatches list below the color selector.

タイプ

string[]

説明

Number of swatches grid columns.

タイプ

UIValue<number>

デフォルト

7

説明

The swatches label to use.

タイプ

type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal

説明

Props for the swatches component.

タイプ

ColorSelectorSwatchesProps

説明

Props for color swatch component.

タイプ

ColorPickerSwatchProps

説明

The value of the color selector.

タイプ

string

説明

The variant of the ColorPicker.

タイプ

"filled" | "flushed" | "outline" | "unstyled"

デフォルト

"outline"

説明

If true, display the channels component.

タイプ

boolean

デフォルト

true

説明

If true display the eye dropper component.

タイプ

boolean

デフォルト

false

説明

If true, display the eye dropper component.

タイプ

boolean

デフォルト

true

説明

If true, display the saturation, hue, alpha, channels and eye dropper component.

タイプ

boolean

デフォルト

true

説明

If true, display the result component.

タイプ

boolean

デフォルト

false

説明

If true, display the color swatch component.

タイプ

boolean

デフォルト

true

GitHubでこのページを編集する

前YearPicker 次FileInput