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.
A bemeneti chrome csak fókusz alatt jelenik meg; a -readonly elnyomja a hover és fókusz lehetőségeket, így az elem mindig egyszerű soron belüli szövegként olvasható.
Forrás: in-place-edit.css
TIP
JS-bővítmény — Ennek a komponensnek a CSS-e önmagában is renderelődik és működik; párosítsa a(z) @pantoken/interactions elemmel az interaktív viselkedés hozzáadásához. Lásd az alábbi módosítótáblázatot.
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>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> | 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 |
Kapcsolódó
- text-input — Fókuszált állapotban ugyanazt a beviteli felületet mutatja meg, mint egy szöveges bevitel.