CSS: alert
.instui-alert — egy inline üzenet egy állapot szín sávval és egy maszk státusz karakterrel a megosztott ikon készletből.
Egy egyéni -icon-<name> megcseréli az állapot karaktert, de megtartja a variáns szín sávját; a sáv kitöltés magasabb specificitáson ismét megerősítve van, így a megosztott ikon festő nem fogyasztja el.
Forrás: alert.css
Akadálymentesség
Egy fontos üzenethez adja meg a role="alert" vagy egy aria-live régió, hogy a segítő technológia bejelentsz; az elvetési vezérlő egy címkézett bezárás gomb (a .instui-close-button a példában aria-label="Close"-t hordoz).
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/alert.css";Példák
html
<div class="instui-alert -icon-megaphone instui-mb-md">
An alert with the default <code>info</code> color, and a custom icon.
</div>
<div class="instui-alert -color-success">
Congratulations! You're using the "success" color.
</div> Congratulations! You're using the "success" color.
Felépítés
text
.instui-alert
‹content›
close-button (component, 0..1)flowchart TD
n0[".instui-alert"]:::cssdoc-root
n1[/"‹content›"/]:::cssdoc-slot
n2(["close-button"]):::cssdoc-component
n0 --> n1
n0 -.->|0..1| n2
click n2 "/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;
Slotok
| Slot | Leírás |
|---|---|
content | Az riasztás üzenet tartalma; tartalmazhat egy elvetési gombat. |
Módosítók
| Módosító | Leírás |
|---|---|
.-color-danger | Egy hibaüzenet. |
.-color-info | Tájékoztató (alapértelmezett). |
.-color-success | Egy pozitív/megerősítő üzenet. |
.-color-warning | Egy figyelmeztető üzenet. |
.-has-shadow-false | Elavult — use .-without-shadow. |
.-icon-* | Az állapot karaktert cserélje egy egyéni ikonra (pl. -icon-megaphone), fehér a variáns szín sávján. |
.-render-custom-icon-* | Elavult — The former renderCustomIcon prop; still works as an alias, but use -icon-<name> (or override --pantoken-alert-glyph) instead. |
.-screen-reader-only | Vizuálisan rejtett, de bejelentett. |
.-variant-error | Elavult — use .-color-danger. |
.-variant-info | Elavult — use .-color-info. |
.-variant-success | Elavult — use .-color-success. |
.-variant-warning | Elavult — use .-color-warning. |
.-without-shadow | Távolítsa el az alapértelmezett magasság árnyékot (InstUI hasShadow={false}). |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::after | A fehér állapot karakter, maszk és középre helyezve a sáv felett. |
::before | A szilárd variáns szín állapot sáv, szoros az kerekített kezdési élhez. |
Egyéni tulajdonságok
| Tulajdonság | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
--pantoken-alert-glyph | <url> | — | Az alacsony szintű állapot-karakter forrás; -icon-<name> beállítja az Ön számára. Felülbírálás egy egyéni ikonra (egy URL-kódolt SVG). |
--pantoken-alert-icon-bg | <color> | — | A szín állapot-sáv kitöltés a karakter mögött; minden -color-* variáns beállítja a sajátját. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-alert-background | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-alert-border-radius | <length> | 0.75rem |
--instui-component-alert-border-style | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | solid |
--instui-component-alert-border-width | <length> | 0.125rem |
--instui-component-alert-color | <color> | light-dark(#273540, #ffffff)LightDark |
--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> | 1.5rem |
--instui-component-alert-content-padding-vertical | <length> | 0.75rem |
--instui-component-alert-danger-border-color | <color> | #E62429 |
--instui-component-alert-danger-icon-background | <color> | #E62429 |
--instui-component-alert-icon-color | <color> | #ffffff |
--instui-component-alert-info-border-color | <color> | #2B7ABC |
--instui-component-alert-info-icon-background | <color> | #2B7ABC |
--instui-component-alert-success-border-color | <color> | #03893D |
--instui-component-alert-success-icon-background | <color> | #03893D |
--instui-component-alert-warning-border-color | <color> | #CF4A00 |
--instui-component-alert-warning-icon-background | <color> | #CF4A00 |
--instui-component-base-button-medium-height | <length> | 2.5rem |
--instui-elevation-above | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--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%22m9%2012%202%202%204-4%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-glyph | <url> | — |
Alkomponensek
Kapcsolódó
- close-button — Az elvetési vezérlő, amelyet egy riasztás tartalmazhat.