Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

HueSlider

HueSliderは、ユーザーが色相を選択するために使用されるコンポーネントです。

ソース@yamada-ui/color-picker

インポート

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

使い方

編集可能な例

<HueSlider />
Copied!

サイズを変更する

編集可能な例

<VStack>
  <For
    each={[
      {
        size: "sm",
        defaultValue: 120,
      },
      {
        size: "md",
        defaultValue: 180,
      },
      {
        size: "lg",
        defaultValue: 240,
      },
    ]}
  >
    {({ size, defaultValue }, index) => (
      <HueSlider key={index} size={size} defaultValue={defaultValue} />
    )}
  </For>
</VStack>
Copied!

最小値と最大値を設定する

最小値と最大値を設定する場合は、minまたはmaxに数値を設定します。デフォルトでは、minは0、maxは360が設定されています。

編集可能な例

const [value, onChange] = useState<number>(140)

return (
  <VStack>
    <Text>Value: {value}</Text>

    <HueSlider value={value} min={120} max={180} onChange={onChange} />
  </VStack>
)
Copied!

ステップ値を設定する

ステップ値を設定する場合は、stepに数値を設定します。

編集可能な例

const [value, onChange] = useState<number>(180)

return (
  <VStack>
    <Text>Value: {value}</Text>

    <HueSlider color="#4387f4" value={value} step={10} onChange={onChange} />
  </VStack>
)
Copied!

外部からの制御のみにする

外部からの制御のみにする場合は、focusThumbOnChangeをfalseにします。

編集可能な例

const [value, setValue] = useState<number>(180)

return (
  <VStack>
    <Text>Value: {value}</Text>
    <HueSlider value={value} step={10} focusThumbOnChange={false} />

    <Center w="full" gap="md">
      <Button
        isDisabled={value === 0}
        onClick={() => setValue((prev) => (prev !== 0 ? prev - 10 : prev))}
      >
        -10
      </Button>

      <Button
        isDisabled={value === 360}
        colorScheme="blue"
        onClick={() => setValue((prev) => (prev !== 360 ? prev + 10 : prev))}
      >
        +10
      </Button>
    </Center>
  </VStack>
)
Copied!

無効化する

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

編集可能な例

<VStack>
  <HueSlider isDisabled />

  <Feildset
    isDisabled
    legend="Pick color"
    helperMessage="Please select your favorite color"
  >
    <HueSlider />
  </Feildset>
</VStack>
Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <HueSlider isReadOnly />

  <Feildset
    isReadOnly
    legend="Pick color"
    helperMessage="Please select your favorite color"
  >
    <HueSlider />
  </Feildset>
</VStack>
Copied!

変更の開始と終了のイベントをハンドルをする

変更の開始と終了のイベントをハンドルをする場合は、onChangeStartやonChangeEndを使用します。

編集可能な例

const [value, onChange] = useState<number>(180)
const [startValue, onChangeStart] = useState<number>(180)
const [endValue, onChangeEnd] = useState<number>(180)

return (
  <VStack>
    <Text>
      Value: {value}, Start Value: {startValue}, End Value: {endValue}
    </Text>

    <HueSlider
      value={value}
      onChange={onChange}
      onChangeStart={onChangeStart}
      onChangeEnd={onChangeEnd}
    />
  </VStack>
)
Copied!

React Hook Formを使う

編集可能な例

type Data = { hueSlider: number }

const defaultValues: Data = {
  hueSlider: 180,
}

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

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

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

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <Feildset
      isInvalid={!!errors.hueSlider}
      legend="Pick color"
      errorMessage={errors.hueSlider ? errors.hueSlider.message : undefined}
    >
      <Controller
        name="hueSlider"
        control={control}
        rules={{ max: { value: 180, message: "The maximum value is 180." } }}
        render={({ field }) => <HueSlider {...field} />}
      />
    </Feildset>

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

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

前RangeSlider次AlphaSlider