Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

ColorPicker

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

ソース@yamada-ui/color-picker

インポート

import { ColorPicker } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<ColorPicker placeholder="#4387f4" />
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <ColorPicker variant="outline" placeholder="outline" />
  <ColorPicker variant="filled" placeholder="filled" />
  <ColorPicker variant="flushed" placeholder="flushed" />
  <ColorPicker variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <ColorPicker placeholder="extra small size" size="xs" />
  <ColorPicker placeholder="small size" size="sm" />
  <ColorPicker placeholder="medium size" size="md" />
  <ColorPicker placeholder="large size" size="lg" />
</VStack>
Copied!

セレクターのサイズを変更する場合は、calendarSizeを設定します。

編集可能な例

<VStack>
  <ColorPicker placeholder="small size" colorSelectorSize="sm" />
  <ColorPicker placeholder="medium size" colorSelectorSize="md" />
  <ColorPicker placeholder="large size" colorSelectorSize="lg" />
  <ColorPicker placeholder="full size" colorSelectorSize="full" />
</VStack>
Copied!

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに文字列を設定します。

編集可能な例

<ColorPicker defaultValue="#4387f4ff" />
Copied!

デフォルトの色を設定する

デフォルトの色を設定する場合は、defaultColorに文字列を設定します。

編集可能な例

<ColorPicker placeholder="#4387f4ff" defaultColor="#4387f4ff" />
Copied!

フォールバックの値を設定する

フォールバックを設定する場合は、fallbackValueに文字列を設定します。これは、入力された文字列で色の判定ができなかった場合に設定される値です。

編集可能な例

<ColorPicker defaultValue="#00000000" fallbackValue="#00000000" />
Copied!

フォーマットを設定する

フォーマットを設定する場合は、formatにhex, hexa, rgb, rgba, hsl, hslaを設定します。

編集可能な例

<ColorPicker defaultValue="hsla(240, 100%, 50%, 1)" format="hsla" />
Copied!

入力された値を整形する

入力された値を整形する場合は、formatInputにコールバック関数を設定します。

編集可能な例

<ColorPicker
  format="hexa"
  placeholder="#4387F4FF"
  formatInput={(value) => value.toUpperCase()}
/>
Copied!

候補を表示する

候補を表示する場合は、swatchesに文字列の配列を設定します。

編集可能な例

<ColorPicker
  defaultValue="#2e2e2e"
  swatchesLabel="Saved Colors"
  swatches={[
    "#2e2e2e",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
    "#228be6",
    "#15aabf",
    "#12b886",
    "#40c057",
    "#82c91e",
    "#fab005",
    "#fd7e14",
  ]}
/>
Copied!

候補を選択したら閉じるようにする

候補を選択したら閉じるようにするには、closeOnSelectSwatchをtrueに設定します。

編集可能な例

<ColorPicker
  defaultValue="#2e2e2e"
  swatchesLabel="Saved Colors"
  swatches={[
    "#2e2e2e",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
    "#228be6",
    "#15aabf",
    "#12b886",
    "#40c057",
    "#82c91e",
    "#fab005",
    "#fd7e14",
  ]}
  closeOnSelectSwatch
/>
Copied!

入力を許可しない

入力を許可しない場合は、allowInputをfalseに設定します。

編集可能な例

<ColorPicker placeholder="#000000" allowInput={false} />
Copied!

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。

編集可能な例

<ColorPicker placeholder="#000000" placement="bottom-end" />
Copied!

オフセットを変更する

要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

<VStack>
  <ColorPicker placeholder="#000000" gutter={32} />
  <ColorPicker placeholder="#000000" offset={[16, 16]} />
</VStack>
Copied!

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。

編集可能な例

<VStack>
  <ColorPicker focusBorderColor="green.500" placeholder="custom border color" />
  <ColorPicker
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<VStack>
  <ColorPicker isDisabled variant="outline" placeholder="outline" />
  <ColorPicker isDisabled variant="filled" placeholder="filled" />
  <ColorPicker isDisabled variant="flushed" placeholder="flushed" />
</VStack>
Copied!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<VStack>
  <ColorPicker isReadOnly variant="outline" placeholder="outline" />
  <ColorPicker isReadOnly variant="filled" placeholder="filled" />
  <ColorPicker isReadOnly variant="flushed" placeholder="flushed" />
</VStack>
Copied!

レイアウトをカスタマイズする

編集可能な例

<ColorPicker placeholder="#000000" withSwatch={false} />
Copied!

編集可能な例

<ColorPicker placeholder="#000000" withEyeDropper={false} />
Copied!

編集可能な例

<ColorPicker
  placeholder="#000000"
  withPicker={false}
  swatchesLabel="Saved Colors"
  swatches={[
    "#2e2e2e",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
    "#228be6",
    "#15aabf",
    "#12b886",
    "#40c057",
    "#82c91e",
    "#fab005",
    "#fd7e14",
  ]}
  closeOnSelectSwatch
/>
Copied!

編集可能な例

<ColorPicker placeholder="#000000" withChannel={false} />
Copied!

編集可能な例

<ColorPicker placeholder="#000000" withSwatch={false} />
Copied!

編集可能な例

<ColorPicker placeholder="#000000" withColorSelectorEyeDropper />
Copied!

編集可能な例

<ColorPicker placeholder="#000000" withResult />
Copied!

ドロップダウンに要素を追加する

ドロップダウンに要素を追加する場合は、childrenに要素を設定します。
childrenには、valueとonCloseのメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。

編集可能な例

<VStack>
  <ColorPicker placeholder="#4387f4">
    <Button>Submit</Button>
  </ColorPicker>

  <ColorPicker placeholder="#4387f4">
    {({ value, onClose }) => <Button onClick={onClose}>Submit {value}</Button>}
  </ColorPicker>
</VStack>
Copied!

制御する

編集可能な例

const [value, onChange] = useState<string>("#4387f4ff")

return <ColorPicker value={value} onChange={onChange} />
Copied!

React Hook Formを使う

編集可能な例

type Data = { colorPicker: string }

const defaultValues: Data = {
  colorPicker: "#4387f4ff",
}

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>({ defaultValues })

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.colorPicker}
      label="Pick color"
      errorMessage={errors.colorPicker ? errors.colorPicker.message : undefined}
    >
      <Controller
        name="colorPicker"
        control={control}
        render={({ field }) => <ColorPicker {...field} />}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

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

前YearPicker次FileInput