CSS: in-place-edit

.instui-in-place-edit — một [contenteditable] đọc như văn bản cho đến khi được tập trung, sau đó hiển thị giao diện nhập.

Giao diện nhập chỉ xuất hiện khi được tập trung; -readonly vô hiệu hóa cả hiệu ứng hover và focus nên phần tử luôn được đọc như văn bản nội tuyến thuần túy.

Source: in-place-edit.css

TIP

Nâng cao JS — CSS của component này tự render và hoạt động độc lập; ghép với @pantoken/interactions để thêm hành vi tương tác. Xem bảng modifier phía dưới.

Khả năng truy cập

Cung cấp cho phần tử có thể chỉnh sửa role="textbox" và một tên có thể truy cập (aria-label).

Sử dụng

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

Demo

Các ví dụ

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

Bộ sửa

Bộ sửa	Mô tả
.-readonly	Hiển thị dưới dạng nội tuyến nhưng không thể chỉnh sửa (không có hiệu ứng hover/focus).

Token tiêu thụ

Token	Kiểu	Giá trị
--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

Liên quan

• text-input — Khi được tập trung sẽ hiển thị cùng giao diện nhập như một ô nhập văn bản.