CSS: banner
.instui-banner — Egy bezárható, ikonnal ellátott üzenetfelület oldalszintű vagy kontextusfüggő bejelentésekhez.
A Size szabályozza a belső margót és a térközt: a(z) relaxed (alapértelmezett) tágasabb; a(z) compact mindkettőt szűkíti. A Color állítja be a kitöltést: a bare (módosító nélküli) kitöltetlen — csak szegély és ikon; a(z) -color-violet és a(z) -color-sea színezett hátteret és egy hozzá illő ikonszínmintát ad hozzá. A(z) -variant-ai a kitöltést egy fentről lefelé haladó színátmenetre cseréli az MI-hez rendelt üzenetekhez.
Akadálymentesség
Adja hozzá a(z) role="status" (vagy sürgős üzenetek esetén a(z) role="alert") értéket, hogy a kisegítő technológia bemondja a bannert; jelölje a dekoratív ikont mint aria-hidden="true", és lássa el a bezárás gombot egy aria-label attribútummal.
Használat
@import "@pantoken/plugin-custom-components/custom-components.css";
@import "@pantoken/plugin-custom-components/custom-components.css";Példák
<div class="instui-banner -color-violet" role="status">
<span class="icon" aria-hidden="true"></span>
<div class="content">This is a violet banner with an icon.</div>
<button class="instui-close-button -size-xs" aria-label="Close"></button>
</div>Felépítés
.instui-banner
icon (component, 0..1)
drawer-layout.content (component, 0..1)
close-button (component, 0..1)Módosítók
| Módosító | Leírás |
|---|---|
.-color-sea | Tengerkék árnyalatú háttér és ikonszínminta. |
.-color-violet | Ibolyaárnyalatú háttér és ikonszínminta. |
.-size-compact | Szűkebb belső margó és térköz. |
.-size-relaxed | Tágasabb belső margó és térköz (alapértelmezett). |
.-variant-ai | MI-hez rendelt színátmenetes háttér az egyszínű kitöltés helyett. |
Részek
| Rész | Leírás |
|---|---|
.content | Az üzenet tartalma, oszlopba rendezve. |
.icon | Az opcionális ikonszínminta; háttere és lekerekítése az aktív méretből/színből származik. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-banner-ai-background-bottom-gradient-color | <color> | LightDarklight-dark(#CFF0F6, #00424A) |
--instui-component-banner-ai-background-top-gradient-color | <color> | LightDarklight-dark(#F3E5F7, #522965) |
--instui-component-banner-border-color | <color> | LightDarklight-dark(#5F6E7A, #9EA6AD) |
--instui-component-banner-border-radius | <length> | 1rem |
--instui-component-banner-border-style | — | solid |
--instui-component-banner-border-width | <length> | 0.0625rem |
--instui-component-banner-close-button-margin-right | <length> | 0.5rem |
--instui-component-banner-close-button-margin-top | <length> | 0.5rem |
--instui-component-banner-color | <color> | LightDarklight-dark(#273540, #ffffff) |
--instui-component-banner-compact-content-gap-horizontal | <length> | 0.5rem |
--instui-component-banner-compact-icon-border-radius | <length> | 0.5rem |
--instui-component-banner-compact-padding-horizontal | <length> | 0.75rem |
--instui-component-banner-compact-padding-vertical | <length> | 0.75rem |
--instui-component-banner-content-gap-vertical | <length> | 0.75rem |
--instui-component-banner-icon-color | <color> | #ffffff |
--instui-component-banner-relaxed-content-gap-horizontal | <length> | 1rem |
--instui-component-banner-relaxed-icon-border-radius | <length> | 0.75rem |
--instui-component-banner-relaxed-padding-horizontal | <length> | 1.5rem |
--instui-component-banner-relaxed-padding-vertical | <length> | 1.5rem |
--instui-component-banner-sea-background | <color> | LightDarklight-dark(#CFF0F6, #00424A) |
--instui-component-banner-sea-icon-background | <color> | #00828E |
--instui-component-banner-violet-background | <color> | LightDarklight-dark(#F3E5F7, #522965) |
--instui-component-banner-violet-icon-background | <color> | #9E58BD |
Alkomponensek
Kapcsolódó
- alert — Nem bezárható, állapotszínű megfelelő a beágyazott üzenetekhez.
- close-button — A bezárási vezérlőelem, amelyet a banner tartalmazhat.