Editable

fandhe-frontend-pre-styled-ui の editable mod が提供するスタイル済み Editable 部品です。

Demo

preview/edit の 2 モードを切り替えるインプレース編集。input/preview は data-* と hidden 属性で排他表示されます。

Name

Ada Lovelace

Name

Disabled

Locked value

size variant クラスを root へ付与し、headless-ui の editable::root へ委譲する。
mode（EditMode::Preview/Edit）・activation_mode・submit_mode の各軸をそのまま引数で受け取る。

root
  label
  area
    input
    preview
  control
    edit-trigger
    submit-trigger
    cancel-trigger

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`mode`	`EditMode`	`EditMode::Preview`	プレビュー/編集の表示モード。
`flags`	`EditableInputFlags`	`EditableInputFlags::default()`	disabled/readonly/required/invalid のフラグ束。root へは disabled/readonly のみ反映する。
`activation_mode`	`EditableActivationMode`	`EditableActivationMode::default()`	編集モードへの遷移トリガー（クリック/ダブルクリック等）。
`submit_mode`	`EditableSubmitMode`	`EditableSubmitMode::default()`	確定操作（Enter/blur 等）の種別。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード。

Variable	Default
`--fandhe-editable-font-size`	`var(--fandhe-font-font-size-sm)`