CSS: in-place-edit ​

.instui-in-place-edit — 一个 [contenteditable]，在未聚焦时以文本形式呈现，聚焦后显示输入框样式。

输入框样式仅在聚焦时出现；-readonly 会同时抑制悬停和聚焦提示，使该元素始终呈现为普通内联文本。

Source: in-place-edit.css

TIP

JS 增强 — 该组件的 CSS 可独立渲染与工作；将其与 @pantoken/interactions 配对可添加交互行为。参见下方的 modifier table。

无障碍 ​

为可编辑元素提供 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 — 聚焦时显示与文本输入相同的输入框样式。