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.

Egy natív <dialog> -on showModal() a modális ablakot a felső rétegbe helyezi és annak ::backdrop maszkká válik, így nincs szükség z-index-re. Az <img> egyedül az .body -ban teljes kitöltésre megy.

Forrás: modal.css

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

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

Demó

Példák

<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

.instui-modal.-size-sm
  .header
    strong
  .body
    code
  .footer
    button (component)

flowchart TD n0[".instui-modal.-size-sm"]:::cssdoc-root n1(".header"):::cssdoc-part n2("strong"):::cssdoc-part n3(".body"):::cssdoc-part n4("code"):::cssdoc-part n5(".footer"):::cssdoc-part n6(["button"]):::cssdoc-component n1 --> n2 n0 --> n1 n3 --> n4 n0 --> n3 n5 --> n6 n0 --> n5 click n6 "/api/css/button.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 chrome (médiatestet párosít).
.-density-compact	Szorosabb részpolstározás.
.-overflow-fit	Korlátozza az ablakra és görgesse a törzset.
.-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.

Részek

Rész	Leírás
.body	A tartalom régió (egy magányos <img> teljes kitöltésre megy).
.footer	A műveletek sora.
.header	A cím sora.

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>	light-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))LightDark
--instui-component-modal-auto-min-width	<length>	16em
--instui-component-modal-background-color	<color>	light-dark(#ffffff, #171B21)LightDark
--instui-component-modal-body-inverse-background-color	<color>	light-dark(#273540, #1C222B)LightDark
--instui-component-modal-body-padding	<length>	1.5rem
--instui-component-modal-body-padding-compact	<length>	0.75rem
--instui-component-modal-border-color	<color>	light-dark(#E8EAEC, #334450)LightDark
--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-footer-background-color	<color>	light-dark(#ffffff, #171B21)LightDark
--instui-component-modal-footer-border-color	<color>	light-dark(#E8EAEC, #334450)LightDark
--instui-component-modal-footer-border-radius	<length>	1rem
--instui-component-modal-footer-border-width	<length>	0.0625rem
--instui-component-modal-footer-inverse-background-color	<color>	light-dark(#273540, #1C222B)LightDark
--instui-component-modal-footer-inverse-border-color	<color>	#334450
--instui-component-modal-footer-padding	<length>	1.5rem
--instui-component-modal-footer-padding-compact	<length>	0.75rem
--instui-component-modal-header-background-color	<color>	light-dark(#ffffff, #171B21)LightDark
--instui-component-modal-header-border-color	<color>	light-dark(#E8EAEC, #334450)LightDark
--instui-component-modal-header-border-width	<length>	0.0625rem
--instui-component-modal-header-inverse-background-color	<color>	light-dark(#273540, #1C222B)LightDark
--instui-component-modal-header-inverse-border-color	<color>	#334450
--instui-component-modal-header-padding	<length>	1.5rem
--instui-component-modal-header-padding-compact	<length>	0.75rem
--instui-component-modal-inverse-background-color	<color>	light-dark(#273540, #1C222B)LightDark
--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>	light-dark(#273540, #F2F4F5)LightDark
--instui-elevation-topmost	[ inset? && <length>{2,4} && <color>? ]# | none	—
--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

• button

Kapcsolódó

• tray — A tálca ugyanez az eltávolítható fedési minta, a képernyő széléhez rögzítve.