CSS: modal
.instui-modal — Egy párbeszédpanel felülete (natív <dialog> működik); fejléc/törzs/lábléc részek.
Az egyes részekkel kapcsolatban lásd a(z) modal.header, modal.body és modal.footer tagokat.
Forrás: body.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
Nyissa meg a natív <dialog> -et showModal() -el a modális szemantikáért és Esc-bezárásért, és nevezze el az aria-labelledby -vel mutatva az .header felé.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/modal.css";Demó
Példák
html
<dialog class="instui-modal -size-sm" id="modal-sm">
<div class="header"><strong>Small</strong></div>
<div class="body"><code>-size-sm</code> — a narrow modal.</div>
<div class="footer">
<button class="instui-button">Close</button>
</div>
</dialog>Felépítés
text
.instui-modal
modal.header (component)
modal.body (component)
modal.footer (component)flowchart TD
n0[".instui-modal"]:::cssdoc-root
n1(["modal.header"]):::cssdoc-component
n2(["modal.body"]):::cssdoc-component
n3(["modal.footer"]):::cssdoc-component
n0 --> n1
n0 --> n2
n0 --> n3
click n1 "/api/css/modal.header.md"
click n2 "/api/css/modal.body.md"
click n3 "/api/css/modal.footer.md"
classDef cssdoc-root stroke-width:1px;
classDef cssdoc-part stroke-width:1px;
classDef cssdoc-slot stroke-width:1px;
classDef cssdoc-component stroke-width:1px;
Módosítók
| Módosító | Leírás |
|---|---|
.-blur | Homályosítsa el a modális mögötti hátteret. |
.-color-inverse | Sötét hátterű keretfelület (médiatartalmú törzzsel párosul). @affects modal.header @affects modal.body @affects modal.footer — Átszínezi az egyes részeket a sötét hátterű megjelenéshez. |
.-density-compact | Szűkebb belső margó a részeknél. @affects modal.header @affects modal.body @affects modal.footer — Csökkenti az egyes részek belső margóját. |
.-overflow-fit | A nézőtérhez (viewport) igazítja és görgeti a törzset. @affects modal.body — Görgeti a törzset, amikor a modális ablak mérete a nézőtérhez van korlátozva. |
.-size-auto | Tartalom szerinti méret. |
.-size-fullscreen | Szélétől széléig. |
.-size-large | Egy széles modális ablak. Az -size-lg hosszú formájú aliasa. |
.-size-lg | Egy széles modális ablak. |
.-size-sm | Egy szűk modális ablak. |
.-size-small | Egy szűk modális ablak. Az -size-sm hosszú formájú aliasa. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::backdrop | Elsötétíti az oldalat a párbeszédpanel mögött maszkjaként, és fagyasztja az -blur alatt. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-mask-background-color | <color> | LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75)) |
--instui-component-modal-auto-min-width | <length> | 16em |
--instui-component-modal-background-color | <color> | LightDarklight-dark(#ffffff, #171B21) |
--instui-component-modal-border-color | <color> | LightDarklight-dark(#E8EAEC, #334450) |
--instui-component-modal-border-radius | <length> | 1rem |
--instui-component-modal-border-width | <length> | 0.0625rem |
--instui-component-modal-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-modal-inverse-background-color | <color> | LightDarklight-dark(#273540, #1C222B) |
--instui-component-modal-inverse-border-color | <color> | #334450 |
--instui-component-modal-inverse-text-color | <color> | #ffffff |
--instui-component-modal-large-max-width | <length> | 62em |
--instui-component-modal-medium-max-width | <length> | 48em |
--instui-component-modal-small-max-width | <length> | 30em |
--instui-component-modal-text-color | <color> | LightDarklight-dark(#273540, #F2F4F5) |
--instui-elevation-topmost | none | <shadow># | — |
--instui-spacing-space-xl | <length> | 1.5rem |
Böngészőtámogatás
- Egy natív <dialog> és annak
::backdrop-ét stílusozza; a felső réteg megjelenítése és a háttér stílusa olyan böngészőt igényel, amely támogatja a párbeszédpanel elemet.
Alkomponensek
Kapcsolódó
- tray — A tálca ugyanez az eltávolítható fedési minta, a képernyő széléhez rögzítve.