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	プレビュー/編集の表示モード。
disabled	bool	false	無効化状態。
readonly	bool	false	読み取り専用状態。
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)