CSS: in-place-edit
.instui-in-place-edit — Egy [contenteditable], amely szövegként olvasható, amíg fókuszálatlan, majd megmutatja a beviteli felületet.
Forrás: in-place-edit.css
Akadálymentesség
Adj az szerkeszthető elemnek role="textbox"-t és egy hozzáférhető nevet (aria-label).
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/in-place-edit.css";Demó
Példák
html
<span class="instui-in-place-edit" contenteditable="true" role="textbox" aria-label="Project name">Untitled</span>Untitled
Módosítók
| Módosító | Leírás |
|---|---|
.-readonly | Beágyazottan jelenik meg, de nem szerkeszthető (nincs lebegtetés/fókusz lehetőség). |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-color-background-muted | <color> | light-dark(#F2F4F5, #273540)LightDark |
--instui-color-text-base | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-component-text-input-background-color | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-text-input-border-color | <color> | light-dark(#7E8792, #5F6E7A)LightDark |
--instui-component-text-input-border-radius | <length> | 0.75rem |
--instui-component-text-input-border-width | <length> | 0.0625rem |
--instui-focus-outline-color | <color> | invert | — |
--instui-focus-outline-offset | <length> | — |
--instui-focus-outline-style | auto | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | — |
--instui-focus-outline-width | <length> | — |
--instui-spacing-space-xs | <length> | 0.25rem |
--instui-spacing-space2xs | <length> | 0.125rem |
Kapcsolódó
- text-input — Fókuszált állapotban ugyanazt a beviteli felületet mutatja meg, mint egy szöveges bevitel.