CSS: in-place-edit ​

.instui-in-place-edit — 포커스가 없을 때는 텍스트로 읽히고, 포커스되면 입력 크롬을 표시하는 [contenteditable]입니다.

입력 크롬은 포커스된 동안에만 나타납니다; -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 — 포커스 시 텍스트 입력과 동일한 입력 크롬을 표시합니다.