CSS: in-place-edit

.instui-in-place-edit — 一個 [contenteditable]，在未聚焦時顯示為文字，聚焦後顯示輸入外觀。

輸入外觀僅在聚焦時顯示；-readonly 會抑制懸停與聚焦交互，讓該元素始終呈現為純內聯文字。

Source: in-place-edit.css

TIP

JS 加強 — 此元件的 CSS 可獨立呈現並運作；與 @pantoken/interactions 配對可新增互動行為。請參閱下方的 修飾子表格。

無障礙

為可編輯元素提供 role="textbox" 並設定一個可訪問名稱（aria-label）。

使用方法

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

示範

範例

<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-color	auto | <color>	—
--instui-focus-outline-offset	<length>	—
--instui-focus-outline-style	auto | <outline-line-style>	—
--instui-focus-outline-width	<line-width>	—
--instui-spacing-space-xs	<length>	0.25rem
--instui-spacing-space2xs	<length>	0.125rem

相關

• text-input — 聚焦時顯示與文字輸入相同的輸入外觀。