CSS: in-place-edit ​

.instui-in-place-edit — フォーカスされるまではテキストとして読み取られ、フォーカスされると入力用の UI（input chrome）を表示する [contenteditable]。

入力用の UI はフォーカス中のみ表示されます。-readonly はホバーとフォーカスの両方のアフォーダンスを抑制し、要素が常にプレーンなインラインテキストとして読み取られるようにします。

Source: in-place-edit.css

TIP

JS 拡張 — このコンポーネントの CSS は単独でレンダリングおよび動作します。対話的な振る舞いを追加するには @pantoken/interactions と組み合わせてください。詳細は下の修飾子表を参照してください。

アクセシビリティ ​

編集可能な要素に role="textbox" を付与し、アクセシブルネーム（aria-label）を設定してください。

使用法 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/in-place-edit.css";

デモ ​

例 ​

html
<span class="instui-in-place-edit" contenteditable="true" role="textbox" aria-label="Project name">Untitled</span>

修飾子 ​

修飾子説明
.-readonlyインラインで表示されるが編集不可（ホバー/フォーカスのアフォーダンス無し）。

使用トークン ​

Token型値
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-component-text-input-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-text-input-border-color<color>LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-text-input-border-radius<length>0.75rem
--instui-component-text-input-border-width<length>0.0625rem
--instui-focus-outline-colorauto | <color>—
--instui-focus-outline-offset<length>—
--instui-focus-outline-styleauto | <outline-line-style>—
--instui-focus-outline-width<line-width>—
--instui-spacing-space-xs<length>0.25rem
--instui-spacing-space2xs<length>0.125rem

関連項目 ​

  • text-input — フォーカス時にテキスト入力と同じ入力用 UI（input chrome）を表示します。