CSS: modal

.instui-modal — He mata kōrerorero (mahi ki te <dialog> taketake); ngā wāhanga upoko/tinana/wāhanga whakamutunga.

Tirohia ngā mema modal.header, modal.body, me modal.footer mō ia wāhanga.

Source: body.css

TIP

Whakawhānui JS — Ka tahuri te CSS o tēnei waahanga, ā, ka mahi anō ia i tōna ake; whakakotahitia ki @pantoken/interactions kia tāpiri i te whanonga tuitui. Tirohia te tāblata whakarerekētanga kei raro.

Wātea mō te katoa

Whakatuwheratia te <dialog> taketake me te showModal() mō ngā tikanga modal me te pēhitanga Esc ki te kati, ā, ingoaia me te aria-labelledby e tohu ana ki te .header.

Ngā Whakamahi

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

Whakaaturanga

Ngā tauira

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

Hanganga

.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;

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-blur	Whakapōrearea te papamuri kei muri o te modal.
.-color-inverse	Chrome mō ngā papamuri pouri (tae atu ki te tinana pāpāho). @affects modal.header @affects modal.body @affects modal.footer — Ka huri i ngā tae o ia wāhanga mō te āhua pouri.
.-density-compact	Whakatītina ngā tāpiri o ia wāhanga. @affects modal.header @affects modal.body @affects modal.footer — Ka whakatītina ngā tāpiri o ia wāhanga.
.-overflow-fit	Whakarite ki te matapihi tirohanga, ā, whakamauhia te tinana kia huri. @affects modal.body — Ka huri te tinana ina kua herea te modal ki te matapihi tirohanga.
.-size-auto	Rahi ki te ihirangi.
.-size-fullscreen	Mai-pito ki te pito.
.-size-large	He modal whānui. He ingoa roa mō -size-lg.
.-size-lg	He modal whānui.
.-size-sm	He modal angiangi.
.-size-small	He modal angiangi. He ingoa roa mō -size-sm.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
::backdrop	Ka mārama-iti te whārangi kei muri i te kōrero hei papanga māhanga (mask), ā, ka whakakōrākora rānei i raro i -blur.

Ngā tohu i whakamahia

Token	Momo	Uara
--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

Tautoko pūtirotiro

• Ka hoahoa i te <dialog> taketake me tōna ::backdrop; me te kaitirotiro tukutuku e tautoko ana i te āhuatanga dialog mō te whakairo paparanga runga me te āhua papamuri.

Ngā wāhanga-iti

• modal.body
• modal.footer
• modal.header

Hono

• tray — He tauira ārai ka taea te katia te tray, kua herea ki tētahi taha o te mata.