CSS: alert

.instui-alert · stable — Innlína skilaboð með litastiku fyrir stöðu og falin stöðutákn úr sameiginlega táknasafninu.

Floating er sjálfgefið, með upphækkðu lituðu yfirborði og aðgerðum í samræmi við litinn. -inline notar pastel-yfirborð, ekkert skugga, stöðulitaðan tákn, venjulegan loka-takka, aðal-aðgerð og þriðja stigs aukaaðgerð. Einn beinn aðgerðartakki myndar röð eftir óumbúiðan texta; umbúðu tvær aðgerðir í .button-group, þar sem þær verða fyrst aukaaðgerð síðan aðal. Sérhver takkaflokkun sleppir þessari sjálfvirku útgáfuhópavalningu. Bein lokunartakki er sjálfgefið lítill; bættu við stærðarbreyttri til að ofskrifa það.

Source: alert.css

TIP

JS viðbót — CSS þessa íhluta birtir hann og virkar sjálfstætt; paraðu hann við @pantoken/interactions til að bæta við gagnvirkni. -timeout breytirinn er stýrður af þeirri hegðun. Sjá breytitöflu hér að neðan.

Aðgengi

Fyrir mikilvægt skilaboð, bætið við role="alert" eða aria-live svæði svo hjálpartækni tilkynnir það; útilokunarstýringin er merkt lokahnappur (dæmið sýnir .instui-close-button sem ber aria-label="Close").

Notkun

css

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

Dæmi

html

<div class="instui-alert -icon-megaphone --mb-md">
  Viðvörun með sjálfgefnu </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  Viðvörun með sjálfgefnu </div>
<div class="instui-alert -color-success --mb-md">
  Til hamingju! Þú ert að nota "success" litinn.
  <button class="instui-button">Í lagi</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  Til hamingju! Þú ert að nota "success" litinn.
  <button class="instui-button">Í lagi</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  Til hamingju! Þú ert að nota "success" litinn.
  <div class="button-group">
    <button class="instui-button">Hætta við</button>
    <button class="instui-button">Í lagi</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error -inline --mb-md">
  Til hamingju! Þú ert að nota "success" litinn.
  <div class="button-group">
    <button class="instui-button">Hætta við</button>
    <button class="instui-button">Í lagi</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning --mb-md">
  Til hamingju! Þú ert að nota "success" litinn.
  <div class="button-group">
    <button class="instui-button">Hætta við</button>
    <button class="instui-button">Í lagi</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning -inline --mb-md">
  Til hamingju! Þú ert að nota "success" litinn.
  <div class="button-group">
    <button class="instui-button">Hætta við</button>
    <button class="instui-button">Í lagi</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Uppbygging

text

.instui-alert
  ‹content›
  (choose one)
    bare-button
      button (component, 0..1)
    button-group
      .button-group
        button (component, 1..2)
  close-button (component, 0..1)

flowchart TD n0[".instui-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot subgraph sg2 subgraph sg3 ["bare-button"] n4["@component button (0..1)"]:::cssdoc-root end subgraph sg5 ["button-group"] n6[".button-group"]:::cssdoc-root n7(["button"]):::cssdoc-component end end n8(["close-button"]):::cssdoc-component n0 --> n1 n6 -->|1..2| n7 n0 --> sg2 n0 -.->|0..1| n8 click n7 "/api/css/button.md" click n8 "/api/css/close-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;

Raufar

Rauf	Lýsing
`content`	Innihald skilaboða fyrir viðvörunina; má innihalda útilokunarhnapp.

Breytingar

Breyti	Lýsing
`.-color-danger`	Villa skilaboð.
`.-color-error`	Alias — maps to `.-color-danger`.
`.-color-info`	Upplýsandi (sjálfgefið).
`.-color-success`	Jákvætt/staðfestandi skilaboð.
`.-color-warning`	Varnaðar skilaboð.
`.-has-shadow-false`	Alias — maps to `.-without-shadow`.
`.-icon-*`	Skiptið út stöðutákninu fyrir sérsniðið tákn (t.d. `-icon-megaphone`), haldið hvítu yfir litastiku breytunnar.
`.-inline`	Óupphækkut pastel-yfirborð til notkunar í skjalflæði.
`.-screen-reader-only`	Sjónrænt falinn en tilkynnt.
`.-timeout`	Interaction — The alert will automatically dismiss after a default of 5 seconds.
`.-timeout-1`	Einn sekúnda fyrir sjálfvirka lokun.
`.-timeout-2`	Tvær sekúndur fyrir sjálfvirka lokun.
`.-timeout-3`	Þrjár sekúndur fyrir sjálfvirka lokun.
`.-timeout-4`	Fjórar sekúndur fyrir sjálfvirka lokun.
`.-timeout-5`	Fimm sekúndur fyrir sjálfvirka lokun.
`.-variant-error`	Úrelt — use `.-color-danger`.
`.-variant-info`	Úrelt — use `.-color-info`.
`.-variant-success`	Úrelt — use `.-color-success`.
`.-variant-warning`	Úrelt — use `.-color-warning`.
`.-without-shadow`	Úrelt — use `.-inline`.

Hlutar

Hluti	Lýsing
`.button-group`	Íláti fyrir tilvitnun og heimild.

Sýndareiningar

Sýndareining	Lýsing
`::after`	Hvítt stöðutákn, falið og miðju yfir stikanum.
`::before`	—

Stöður

Staða	Lýsing
`[aria-disabled="true"]`	—
`:disabled`	—

Sérsniðnar eigindir

Eiginleiki	Tegund	Sjálfgefið	Lýsing
`--pantoken-alert-glyph`	`<url>`	—	Lágt stig stöðutákns; `-icon-<name>` setur það fyrir þig. Yfirstaðið fyrir sérsniðið tákn (url-kóðað SVG).
`--pantoken-alert-icon-bg`	`<color>`	—	Litafylling stöðustikarinnar fyrir aftan táknið; hver `-color-*` breytir setur sína eigin.
`--timeout`	`<integer>`	—	Millisekúndur fyrir sjálfvirka lokun; `0` slær það úr. Krefst viðvörunar gagnvirknipakka.

Notuð tákn

Token	Tegund	Gildi
`--instui-color-background-interactive-action-primary-active`	`<color>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-background-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-background-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-drop-shadow-shadow-color1`	`<color>`	LightDark`light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))`
`--instui-color-icon-base`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-color-icon-error`	`<color>`	LightDark`light-dark(#C51F22, #FA917F)`
`--instui-color-icon-info`	`<color>`	LightDark`light-dark(#2369A4, #7FB4F1)`
`--instui-color-icon-on-color`	`<color>`	`#ffffff`
`--instui-color-icon-success`	`<color>`	LightDark`light-dark(#017533, #61C378)`
`--instui-color-icon-warning`	`<color>`	LightDark`light-dark(#664800, #E0A300)`
`--instui-color-stroke-interactive-action-primary-active`	`<color>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-stroke-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-stroke-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-text-base`	`<color>`	LightDark`light-dark(#273540, #F2F4F5)`
`--instui-color-text-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-component-alert-border-radius`	`<length>`	`0.75rem`
`--instui-component-alert-border-style`	—	`solid`
`--instui-component-alert-border-width`	`<length>`	`0.0625rem`
`--instui-component-alert-content-font-family`	`[ <font-family-name> \| <generic-font-family> ]#`	`Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif`
`--instui-component-alert-content-font-size`	`<length>`	`1rem`
`--instui-component-alert-content-font-weight`	`<integer>`	`400`
`--instui-component-alert-content-line-height`	`<percentage>`	`125%`
`--instui-component-alert-content-padding-horizontal`	`<length>`	`0.75rem`
`--instui-component-alert-content-padding-vertical`	`<length>`	`0.75rem`
`--instui-component-alert-danger-background`	`<color>`	`#E62429`
`--instui-component-alert-danger-background-inline`	`<color>`	LightDark`light-dark(#FFE3DE, #750D0F)`
`--instui-component-alert-danger-border-color`	`<color>`	`#E62429`
`--instui-component-alert-danger-border-color-inline`	—	`color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)`
`--instui-component-alert-icon-padding-left`	`<length>`	`0.75rem`
`--instui-component-alert-icon-padding-vertical`	`<length>`	`1rem`
`--instui-component-alert-info-background`	`<color>`	`#2B7ABC`
`--instui-component-alert-info-background-inline`	`<color>`	LightDark`light-dark(#DEEBFF, #123E62)`
`--instui-component-alert-info-border-color`	`<color>`	`#2B7ABC`
`--instui-component-alert-info-border-color-inline`	—	`color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)`
`--instui-component-alert-success-background`	`<color>`	`#03893D`
`--instui-component-alert-success-background-inline`	`<color>`	LightDark`light-dark(#CAF4D0, #01451B)`
`--instui-component-alert-success-border-color`	`<color>`	`#03893D`
`--instui-component-alert-success-border-color-inline`	—	`color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)`
`--instui-component-alert-warning-background`	`<color>`	LightDark`light-dark(#F0C16C, #8C6400)`
`--instui-component-alert-warning-background-inline`	`<color>`	LightDark`light-dark(#F7E7CF, #4D3600)`
`--instui-component-alert-warning-border-color`	`<color>`	LightDark`light-dark(#F0C16C, #8C6400)`
`--instui-component-alert-warning-border-color-inline`	—	`color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)`
`--instui-component-base-button-medium-height`	`<length>`	`2.5rem`
`--instui-component-base-button-primary-disabled-background-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-disabled-text-color`	`<color>`	LightDark`light-dark(#F2F4F5, #273540)`
`--instui-component-base-button-primary-ghost-active-background`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)`
`--instui-component-base-button-primary-ghost-border-color`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)`
`--instui-component-base-button-primary-ghost-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-primary-ghost-hover-background`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)`
`--instui-component-base-button-primary-inverse-active-background`	`<color>`	`#E2EAF7`
`--instui-component-base-button-primary-inverse-background`	`<color>`	`#ffffff`
`--instui-component-base-button-primary-inverse-border-color`	`<color>`	`#ffffff`
`--instui-component-base-button-primary-inverse-color`	`<color>`	`#213D5B`
`--instui-component-base-button-primary-inverse-ghost-active-background`	`<color>`	`rgba(255,255,255,0.1)`
`--instui-component-base-button-primary-inverse-ghost-border-color`	`<color>`	`#ffffff`
`--instui-component-base-button-primary-inverse-ghost-color`	`<color>`	`#ffffff`
`--instui-component-base-button-primary-inverse-ghost-hover-background`	`<color>`	`rgba(255,255,255,0.1)`
`--instui-component-base-button-primary-inverse-hover-background`	`<color>`	`#EEF4FD`
`--instui-component-base-button-primary-on-color-active-border-color`	`<color>`	`#B6CCEA`
`--instui-component-base-button-primary-on-color-active-text-color`	`<color>`	`#213D5B`
`--instui-component-base-button-primary-on-color-disabled-background-color`	`<color>`	`#8D959F`
`--instui-component-base-button-primary-on-color-disabled-border-color`	`<color>`	`#8D959F`
`--instui-component-base-button-primary-on-color-disabled-text-color`	`<color>`	`#4A5B68`
`--instui-component-base-button-primary-on-color-hover-border-color`	`<color>`	`#D5E2F6`
`--instui-component-base-button-primary-on-color-hover-text-color`	`<color>`	`#213D5B`
`--instui-component-base-button-secondary-on-color-active-border-color`	`<color>`	`#B6CCEA`
`--instui-component-base-button-secondary-on-color-active-text-color`	`<color>`	`#ffffff`
`--instui-component-base-button-secondary-on-color-disabled-border-color`	`<color>`	`#8D959F`
`--instui-component-base-button-secondary-on-color-disabled-text-color`	`<color>`	`#9EA6AD`
`--instui-component-base-button-small-font-size`	`<length>`	`0.875rem`
`--instui-component-base-button-small-height`	`<length>`	`2rem`
`--instui-component-base-button-small-padding-horizontal`	`<length>`	`0.75rem`
`--instui-component-base-button-tertiary-active-border-color`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)`
`--instui-component-base-button-tertiary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-tertiary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-tertiary-disabled-text-color`	`<color>`	LightDark`light-dark(#AAB0B5, #4A5B68)`
`--instui-component-base-button-tertiary-hover-border-color`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)`
`--instui-component-base-button-tertiary-hover-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-shared-tokens-spacing-gap-buttons`	`<length>`	`0.75rem`
`--instui-component-shared-tokens-spacing-general-space-md`	`<length>`	`0.75rem`
`--instui-component-text-base-on-color`	`<color>`	`#ffffff`
`--instui-drop-shadow-blur-elevation4-dropshadow1`	`<length>`	`12px`
`--instui-drop-shadow-spread-elevation4-dropshadow1`	`<length>`	`6px`
`--instui-drop-shadow-y-elevation4-dropshadow1`	`<length>`	`8px`
`--instui-icon-circle-check`	`<image>`	`url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m16%209-5.5%205.5L8%2012%22%2F%3E%3C%2Fsvg%3E')`
`--instui-icon-circle-x`	`<image>`	`url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E')`
`--instui-icon-info`	`<image>`	`url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E')`
`--instui-icon-triangle-alert`	`<image>`	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E')
`--instui-spacing-space-xs`	`<length>`	`0.25rem`
`--pantoken-alert-icon-color`	`<color>`	`#ffffff`
`--pantoken-glyph`	`<url>`	`url("data:image/svg+xml`

Undirhlutir

Tengdar

close-button — Útilokunarstýring sem viðvörun getur innihaldið.

Íhlutir

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

Hjálparverkfæri

Reglur

Yfirlýsingar

Plugins

layout

CSS: alert

Aðgengi

Notkun

Dæmi

Uppbygging

Raufar

Breytingar

Hlutar

Sýndareiningar

Stöður

Sérsniðnar eigindir

Notuð tákn

Undirhlutir

Tengdar

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

CSS: alert ​

Aðgengi ​

Notkun ​

Dæmi ​

Uppbygging ​

Raufar ​

Breytingar ​

Hlutar ​

Sýndareiningar ​

Stöður ​

Sérsniðnar eigindir ​

Notuð tákn ​

Undirhlutir ​

Tengdar ​

CSS: alert

Aðgengi

Notkun

Dæmi

Uppbygging

Raufar

Breytingar

Hlutar

Sýndareiningar

Stöður

Sérsniðnar eigindir

Notuð tákn

Undirhlutir

Tengdar