CSS: modal ​

.instui-modal — Una superfície de diàleg (funciona en un <dialog> natiu); parts d’encapçalament/cos/potapè.

Vegeu els membres modal.header, modal.body i modal.footer per a les parts individuals.

Source: body.css

TIP

Millora JS — El CSS d'aquest component es renderitza i funciona per si sol; combineu-lo amb @pantoken/interactions per afegir el comportament interactiu. Vegeu la taula de modificadors més avall.

Accessibilitat ​

Obriu el <dialog> natiu amb showModal() per a la semàntica modal i tancar amb Esc, i anomeneu-lo amb aria-labelledby apuntant a .header.

Ús ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/modal.css";

Demo ​

Exemples ​

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>

Estructura ​

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;

Modificadors ​

ModificadorDescripció
.-blurEmborronar el fons darrere del modal.
.-color-inverseChrome per a fons fosc (s’acompanya d’un cos de mitjans). @affects modal.header @affects modal.body @affects modal.footer — Recoloreja cada part per tenir l’aparença de fons fosc.
.-density-compactMés ajustat el farcit de les parts. @affects modal.header @affects modal.body @affects modal.footer — Redueix el farcit de cada part.
.-overflow-fitLimita-ho a la finestra d’visualització i desplaça el cos. @affects modal.body — Fa que el cos es pugui desplaçar quan el modal està limitat a la finestra d’visualització.
.-size-autoDimensionat segons el contingut.
.-size-fullscreenDe vora a vora.
.-size-largeUn modal ample. Àlies de formulari llarg de -size-lg.
.-size-lgUn modal ampli.
.-size-smUn modal estret.
.-size-smallUn modal estret. Àlies de formulari llarg de -size-sm.

Pseudoelements ​

PseudoelementDescripció
::backdropAtenua la pàgina darrere del diàleg com a màscara i la glaça sota -blur.

Tokens consumits ​

TokenTipusValor
--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

Suport del navegador ​

  • Estilitza un <dialog> natiu i el seu ::backdrop; el renderitzat de capa superior i l’estil del fons requereixen un navegador que doni suport a l’element dialog.

Subcomponents ​

Relacionat ​

  • tray — Un tray és el mateix patró de superposició desmuntable, ancorat a un bord de la pantalla.