Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

SaturationSlider

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

ソース@yamada-ui/color-picker

インポート

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

使い方

編集可能な例

<SaturationSlider />
Copied!

サイズを変更する

編集可能な例

<VStack>
  <SaturationSlider size="sm" defaultValue={[120, 0.33, 0.33]} />
  <SaturationSlider size="md" defaultValue={[180, 0.66, 0.66]} />
  <SaturationSlider size="lg" defaultValue={[240, 1, 1]} />
</VStack>
Copied!

ステップ値を設定する

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

編集可能な例

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

return (
  <VStack>
    <Text>Value: {JSON.stringify(value)}</Text>

    <SaturationSlider value={value} step={0.1} onChange={onChange} />
  </VStack>
)
Copied!

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

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

編集可能な例

const [value, setValue] = useState<Hsv>([180, 1, 1])
const [, s, v] = value

const onChange = (space: "s" | "v", type: "increment" | "decrement") => {
  const i = space === "s" ? 1 : 2

  setValue((prev) => {
    if (type === "increment") {
      if (prev[i] !== 1) prev[i] = Math.round((prev[i] + 0.1) * 10) / 10
    } else {
      if (prev[i] !== 0) prev[i] = Math.round((prev[i] - 0.1) * 10) / 10
    }

    return [...prev]
  })
}

return (
  <VStack>
    <Text>Value: {JSON.stringify(value)}</Text>
    <SaturationSlider value={value} step={10} focusThumbOnChange={false} />

    <Wrap gap="md">
      <VStack w="auto" gap="sm">
        <Text>Saturation</Text>

        <Wrap gap="md">
          <Button
            isDisabled={s === 0}
            onClick={() => onChange("s", "decrement")}
          >
            -0.1
          </Button>

          <Button
            isDisabled={s === 1}
            colorScheme="blue"
            onClick={() => onChange("s", "increment")}
          >
            +0.1
          </Button>
        </Wrap>
      </VStack>

      <VStack w="auto" gap="sm">
        <Text>Brightness</Text>

        <Wrap gap="md">
          <Button
            isDisabled={v === 0}
            onClick={() => onChange("v", "decrement")}
          >
            -0.1
          </Button>

          <Button
            isDisabled={v === 1}
            colorScheme="blue"
            onClick={() => onChange("v", "increment")}
          >
            +0.1
          </Button>
        </Wrap>
      </VStack>
    </Wrap>
  </VStack>
)
Copied!

無効化する

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

編集可能な例

<VStack>
  <SaturationSlider isDisabled />

  <FormControl
    isDisabled
    label="Pick color"
    helperMessage="Please select your favorite color"
  >
    <SaturationSlider />
  </FormControl>
</VStack>
Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <SaturationSlider isReadOnly />

  <FormControl
    isReadOnly
    label="Pick color"
    helperMessage="Please select your favorite color"
  >
    <SaturationSlider />
  </FormControl>
</VStack>
Copied!

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

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

編集可能な例

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

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

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

React Hook Formを使う

編集可能な例

type Data = { saturationSlider: Hsv }

const defaultValues: Data = {
  saturationSlider: [180, 1, 1],
}

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)}>
    <FormControl
      isInvalid={!!errors.saturationSlider}
      label="Pick color"
      errorMessage={
        errors.saturationSlider ? errors.saturationSlider.message : undefined
      }
    >
      <Controller
        name="saturationSlider"
        control={control}
        render={({ field }) => <SaturationSlider {...field} />}
      />
    </FormControl>

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

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

前AlphaSlider次Editable