Editable
Editable
は、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。
インポート
import {Editable,EditableInput,EditablePreview,EditableTextarea,} from "@yamada-ui/react"
Editable
: 子要素(EditableInput
,EditableTextarea
,EditablePreview
)を制御するラッパーコンポーネントです。EditablePreview
: テキスト入力の値を表示するコンポーネントです。EditableInput
: テキスト入力を取得するコンポーネントです。EditablePreview
がクリックまたはフォーカスすると表示されます。EditableTextarea
: 複数行のテキスト入力を取得するコンポーネントです。EditablePreview
がクリックまたはフォーカスすると表示されます。
使い方
編集可能な例
<Editable defaultValue="オッス!オラ悟空!"> <EditablePreview /> <EditableInput /> </Editable>
複数行の場合は、EditableTextarea
を使用します。
編集可能な例
<Editable defaultValue={`私の戦闘力は530000です。\nですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……`} > <EditablePreview /> <EditableTextarea h="2lh" /> </Editable>
ボーダーのカラーを変更する
ボーダーのカラーを変更する場合は、focusBorderColor
またはerrorBorderColor
にカラーを設定します。
編集可能な例
<Editable focusBorderColor="green.500" defaultValue="custom border color"> <EditablePreview /> <EditableInput /> </Editable>
無効化する
無効化する場合は、isDisabled
をtrue
に設定します。
編集可能な例
<Editable isDisabled defaultValue="your email address"> <EditablePreview /> <EditableInput /> </Editable>
読み取り専用にする
読み取り専用にする場合は、isReadOnly
をtrue
に設定します。
編集可能な例
<Editable isReadOnly defaultValue="your email address"> <EditablePreview /> <EditableInput /> </Editable>
無効な入力にする
無効な入力にする場合は、isInvalid
をtrue
に設定します。
編集可能な例
<Editable isInvalid defaultValue="your email address"> <EditablePreview /> <EditableInput /> </Editable>
制御する
編集可能な例
const CustomControls = () => { const { isEditing, getSubmitProps, getCancelProps, getEditProps } = useEditableControl() return isEditing ? ( <ButtonGroup size="sm" gap="sm"> <IconButton icon={<CheckIcon />} {...getSubmitProps()} /> <IconButton icon={<XIcon />} {...getCancelProps()} /> </ButtonGroup> ) : ( <ButtonGroup size="sm" gap="sm"> <IconButton icon={<PenIcon />} {...getEditProps()} /> </ButtonGroup> ) } return ( <Editable display="flex" gap="sm" isPreviewFocusable={false} defaultValue="オッス!オラ悟空!" > <EditablePreview w="full" /> <EditableInput /> <CustomControls /> </Editable> )
React Hook Form
を使う
編集可能な例
type Data = { input: string; textarea: string } const defaultValues: Data = { input: "", textarea: "", } 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)}> <Fieldset isInvalid={!!errors.input} legend="Name" errorMessage={errors.input ? errors.input.message : undefined} > <Controller name="input" control={control} rules={{ required: { value: true, message: "This is required." } }} render={({ field }) => ( <Editable placeholder="孫悟空" {...field}> <EditablePreview /> <EditableInput /> </Editable> )} /> </Fieldset> <Fieldset isInvalid={!!errors.textarea} legend="Feedback" errorMessage={errors.textarea ? errors.textarea.message : undefined} > <Controller name="textarea" control={control} rules={{ required: { value: true, message: "This is required." } }} render={({ field }) => ( <Editable placeholder={`私の戦闘力は530000です。\nですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……`} {...field} > <EditablePreview /> <EditableTextarea h="2lh" /> </Editable> )} /> </Fieldset> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する