SaturationSlider
SaturationSliderは、ユーザーが色の彩度を選択するために使用されるコンポーネントです。
<SaturationSlider.Root maxW="sm" />
使い方
import { SaturationSlider } from "@yamada-ui/react"
import { SaturationSlider } from "@/components/ui"
import { SaturationSlider } from "@workspaces/ui"
<SaturationSlider.Root />
サイズを変更する
<VStack>
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<SaturationSlider.Root key={index} size={size} maxW="sm" />
)}
</For>
</VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValueに値を設定します。
<SaturationSlider.Root defaultValue={[120, 0.33, 0.33]} maxW="sm" />
形を変更する
<VStack>
<For each={["circle", "rounded", "square"]}>
{(shape, index) => (
<SaturationSlider.Root
key={index}
defaultValue={[120, 0.33, 0.33]}
shape={shape}
maxW="sm"
/>
)}
</For>
</VStack>
ステップ値を設定する
ステップ値を設定する場合は、stepに値を設定します。
<SaturationSlider.Root step={0.1} maxW="sm" />
無効にする
無効にする場合は、disabledをtrueに設定します。
<SaturationSlider.Root disabled maxW="sm" />
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<SaturationSlider.Root readOnly maxW="sm" />
ツールチップを表示する
const [value, setValue] = useState([120, 0.33, 0.33])
return (
<SaturationSlider.Root value={value} onChange={setValue} maxW="sm">
<SaturationSlider.Track>
<Tooltip content={value}>
<SaturationSlider.Thumb />
</Tooltip>
</SaturationSlider.Track>
</SaturationSlider.Root>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。開始と終了のイベントをハンドルする
開始と終了のイベントをハンドルする場合は、onChangeStartやonChangeEndを使用します。
Value: [120,0.33,0.33], Start Value: [120,0.33,0.33], End Value: [120,0.33,0.33]
const [value, onChange] = useState([120, 0.33, 0.33])
const [startValue, onChangeStart] = useState([120, 0.33, 0.33])
const [endValue, onChangeEnd] = useState([120, 0.33, 0.33])
return (
<VStack>
<Text>
Value: {JSON.stringify(value)}, Start Value: {JSON.stringify(startValue)},
End Value: {JSON.stringify(endValue)}
</Text>
<SaturationSlider.Root
value={value}
onChange={onChange}
onChangeStart={onChangeStart}
onChangeEnd={onChangeEnd}
maxW="sm"
/>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。制御する
const [value, setValue] = useState([120, 0.33, 0.33])
return <SaturationSlider.Root value={value} onChange={setValue} maxW="sm" />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。