AlphaSlider
AlphaSlider
は、ユーザーが色の透明度を選択するために使用されるコンポーネントです。
インポート
import { AlphaSlider } from "@yamada-ui/react"
使い方
編集可能な例
<AlphaSlider />
サイズを変更する
編集可能な例
<VStack> <For each={[ { color: "#4387f4", size: "sm", defaultValue: 0.3, }, { color: "#895af6", size: "md", defaultValue: 0.6, }, { color: "#3cc360", size: "lg", defaultValue: 0.9, }, ]} > {({ color, size, defaultValue }, index) => ( <AlphaSlider key={index} color={color} size={size} defaultValue={defaultValue} /> )} </For> </VStack>
最小値と最大値を設定する
最小値と最大値を設定する場合は、min
またはmax
に数値を設定します。デフォルトでは、min
は0
、max
は1
が設定されています。
編集可能な例
const [value, onChange] = useState<number>(0.5) return ( <VStack> <Text>Value: {value}</Text> <AlphaSlider color="#4387f4" value={value} min={0.3} max={0.8} onChange={onChange} /> </VStack> )
ステップ値を設定する
ステップ値を設定する場合は、step
に数値を設定します。
編集可能な例
const [value, onChange] = useState<number>(0.5) return ( <VStack> <Text>Value: {value}</Text> <AlphaSlider color="#4387f4" value={value} step={0.1} onChange={onChange} /> </VStack> )
外部からの制御のみにする
外部からの制御のみにする場合は、focusThumbOnChange
をfalse
にします。
編集可能な例
const [value, setValue] = useState<number>(0.5) return ( <VStack> <Text>Value: {value}</Text> <AlphaSlider color="#4387f4" value={value} step={0.1} focusThumbOnChange={false} /> <Center w="full" gap="md"> <Button isDisabled={value === 0} onClick={() => setValue((prev) => prev !== 0 ? Math.round((prev - 0.1) * 10) / 10 : prev, ) } > -0.1 </Button> <Button isDisabled={value === 1} colorScheme="blue" onClick={() => setValue((prev) => prev !== 1 ? Math.round((prev + 0.1) * 10) / 10 : prev, ) } > +0.1 </Button> </Center> </VStack> )
無効化する
無効化する場合は、isDisabled
をtrue
に設定します。
編集可能な例
<VStack> <AlphaSlider color="#4387f4" isDisabled /> <Fieldset isDisabled legend="Pick color" helperMessage="Please select your favorite color" > <AlphaSlider color="#4387f4" /> </Fieldset> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnly
をtrue
に設定します。
編集可能な例
<VStack> <AlphaSlider color="#4387f4" isReadOnly /> <Fieldset isReadOnly legend="Pick color" helperMessage="Please select your favorite color" > <AlphaSlider color="#4387f4" /> </Fieldset> </VStack>
変更の開始と終了のイベントをハンドルをする
変更の開始と終了のイベントをハンドルをする場合は、onChangeStart
やonChangeEnd
を使用します。
編集可能な例
const [value, onChange] = useState<number>(0.5) const [startValue, onChangeStart] = useState<number>(0.5) const [endValue, onChangeEnd] = useState<number>(0.5) return ( <VStack> <Text> Value: {value}, Start Value: {startValue}, End Value: {endValue} </Text> <AlphaSlider color="#4387f4" value={value} onChange={onChange} onChangeStart={onChangeStart} onChangeEnd={onChangeEnd} /> </VStack> )
React Hook Form
を使う
編集可能な例
type Data = { alphaSlider: number } const defaultValues: Data = { alphaSlider: 0.5, } 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)}> <Fieldset isInvalid={!!errors.alphaSlider} legend="Pick color" errorMessage={errors.alphaSlider ? errors.alphaSlider.message : undefined} > <Controller name="alphaSlider" control={control} rules={{ max: { value: 0.5, message: "The maximum value is 0.5." } }} render={({ field }) => <AlphaSlider {...field} />} /> </Fieldset> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する