CSS: modal ​

.instui-modal — Egy párbeszédfelület (működik a natív <dialog> elemmel); fejléc/tartalom/lábléc részei.

Az egyes részekért tekintse meg a modal.header, modal.body és modal.footer tagokat.

Source: body.css

TIP

JS kiegészítés — Ez a komponens CSS-e önállóan megjelenik és működik; párosítsd @pantoken/interactions-val az interaktív viselkedés hozzáadásához. Lásd az alábbi módosító táblázatot.

Hozzáférhetőség ​

Nyisd meg a natív <dialog>-ot showModal()-lal a modális szemantika és az Esc-sel való bezárás biztosításához, és nevezd meg aria-labelledby-tel, amely a .header-re mutat.

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>Kis</strong></div>
  <div class="body"><code>-size-sm</code> — egy keskeny modális ablak.</div>
  <div class="footer">
    <button class="instui-button">Bezár</button>
  </div>
</dialog>

Struktúra ​

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
.-blurHomályosítsa el a modális mögötti hátteret.
.-color-inverseSötét megjelenésű chrome (párosítva egy media body-val). @affects modal.header @affects modal.body @affects modal.footer — Átszínezi az egyes részeket a sötét megjelenéshez.
.-density-compactSzűkebb részek belső margója. @affects modal.header @affects modal.body @affects modal.footer — Minden rész belső margóját csökkenti.
.-overflow-fitKorlátozza a nézetablakra és görgeti a body-t. @affects modal.body — A body görgetése, amikor a modal a nézetablakra van korlátozva.
.-size-autoTartalomhoz méretezve.
.-size-fullscreenSzéltől szélig.
.-size-largeSzéles modális ablak. A -size-lg hosszabb alakú aliasa.
.-size-lgEgy széles modális ablak.
.-size-smEgy keskeny modális ablak.
.-size-smallEgy keskeny modális ablak. A -size-sm hosszabb formájú aliasa.

Pseudo-elemek ​

Pseudo-elemLeírás
::backdropA párbeszédablak mögötti oldalt maszkként elhalványítja, és -blur alatt fagyos üveg (frost) hatást alkalmaz rajta.

Fogyasztott tokenek ​

TokenTí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-topmostnone | <shadow>#—
--instui-spacing-space-xl<length>1.5rem

Böngészőtámogatás ​

Egy natív <dialog> és annak ::backdrop stílusát adja meg; a felső rétegű megjelenítéshez és a háttérstílusokhoz olyan böngésző szükséges, amely támogatja a dialog elemet.

Alkomponensek ​

Kapcsolódó ​

  • tray — A tray ugyanaz a bezárható átfedő minta, amely a képernyő széléhez rögzítve van.