CSS: banner ​

.instui-banner · alpha — Egy bezárható, ikonozott üzenetfelület oldalszintű vagy kontextusban megjelenő értesítésekhez.

Méret szabályozza a paddinget és a réseket: relaxed (alapértelmezett) tágasabb; compact szorosabbá teszi mindkettőt. Szín beállítja a kitöltést: alap (módosító nélkül) nincs kitöltve — csak keret és ikon; -color-violet és -color-sea árnyalt hátteret és hozzáillő ikonmintát adnak.

Hozzáférhetőség ​

Adj hozzá role="status" (vagy role="alert" sürgős üzenetekhez), hogy a segítő technológiák bejelentsék a bannert; jelöld a dekoratív ikont aria-hidden="true"-ként és add meg a bezáró gombnak az aria-label-t.

Használat ​

@import "@pantoken/plugin-custom-components/custom-components.css";

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Példák ​

html
<div class="instui-banner -icon-canvas-icon-reversed" role="status">
  <h2 class="instui-heading">Új funkció</h2>
  <span class="instui-text">Ez egy ibolyaszínű banner egy egyedi ikonnal.</span>
  <div class="button-group">
    <button class="instui-button">Mégse</button>
    <button class="instui-button">Rendben</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Sea colored and compact spacing

html
<div class="instui-banner -color-sea -size-sm" role="status">
  Ez egy tengerszínű banner kompakt távolságokkal.
</div>

Struktúra ​

text
.instui-banner
  heading (component, 0..1)
  ‹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-banner"]:::cssdoc-root n1(["heading"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot subgraph sg3 subgraph sg4 ["bare-button"] n5["@component button (0..1)"]:::cssdoc-root end subgraph sg6 ["button-group"] n7[".button-group"]:::cssdoc-root n8(["button"]):::cssdoc-component end end n9(["close-button"]):::cssdoc-component n0 -.->|0..1| n1 n0 --> n2 n7 -->|1..2| n8 n0 --> sg3 n0 -.->|0..1| n9 click n1 "/api/css/heading.md" click n8 "/api/css/button.md" click n9 "/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;

Módosítók ​

MódosítóLeírás
.-color-seaTengerárnyalatú háttér és ikonmintázat.
.-color-violetIbolyaárnyalatú háttér és ikonmintázat.
.-icon-*Cseréld az alapértelmezett info glyph-et egy megosztott ikonkészletből származó ikonra (például -icon-megaphone).
.-size-compactSzorosabb padding és rések.
.-size-mdAlias — maps to .-size-relaxed.
.-size-relaxedTágasabb padding és rés (alapértelmezett).
.-size-smAlias — maps to .-size-compact.

Részek ​

RészLeírás
.button-groupKonténer az idézet és az attribúció számára.

Pseudo-elemek ​

Pseudo-elemLeírás
::after—
::before—

Állapotok ​

ÁllapotLeírás
[aria-disabled="true"]—
:disabled—

Fogyasztott tokenek ​

TokenTípusÉrték
--instui-color-background-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-banner-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 10%, transparent)
--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.5rem
--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
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-primary-disabled-background-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-text-color<color>LightDarklight-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>LightDarklight-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-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>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color<color>LightDarklight-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>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-heading-title-card-mini-font-size<length>1rem
--instui-component-heading-title-card-mini-font-weight<integer>700
--instui-component-heading-title-card-regular-font-size<length>1.25rem
--instui-component-heading-title-card-regular-font-weight<integer>700
--instui-component-shared-tokens-spacing-gap-buttons<length>0.75rem
--instui-component-text-content-font-size<length>1rem
--instui-component-text-content-font-weight<integer>400
--instui-component-text-content-line-height<percentage>150%
--instui-component-text-content-small-font-size<length>0.875rem
--instui-component-text-content-small-font-weight<integer>400
--instui-component-text-content-small-line-height<percentage>150%
--instui-font-size-text-base<length>1rem
--instui-icon-megaphone<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%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E')
--instui-line-height-standalone-text-base<length>1rem
--pantoken-banner-close-button-reserve<length>0rem
--pantoken-banner-glyph<url>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%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E')
--pantoken-banner-icon-background<color>#9E58BD
--pantoken-banner-icon-inset-block-start<length>1.5rem
--pantoken-banner-icon-inset-inline-start<length>1.5rem
--pantoken-banner-icon-size<length>2rem
--pantoken-glyph<url>url("data:image/svg+xml

Alkomponensek ​

Kapcsolódó ​

  • alert — Nem bezárható, státuszszínű párja az inline üzeneteknek.
  • close-button — A bezáró vezérlő, amelyet egy banner tartalmazhat.