CSS: banner ​

.instui-banner · alpha — Dromchla teachtaireachta le híomhá is féidir a dhúnadh do fhógraí ar leibhéal an leathanach nó fógraí i gcomhthéacs.

Méid rialíonn an spás inmheánach agus an bhearna: relaxed (réamhshocraithe) tá níos leithne; cuireann compact an dá cheann níos dlúithe. Dath leagann an líonadh: bare (gan modhnóir) níl sé líonta — teorainn agus íocón amháin; cuireann -color-violet agus -color-sea cúlra le tint agus sampla íocóin mheaitseála.

Inrochtaineacht ​

Cuir role="status" leis (nó role="alert" do theachtaireachtaí práinneacha) ionas go bhfógraíonn teicneolaíocht chabhrach an bhainéara; marcáil íocón maisiúcháin mar aria-hidden="true" agus tabhair aria-label don chnaipe dúnála.

Úsáid ​

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

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

Samplaí ​

html
<div class="instui-banner -icon-canvas-icon-reversed" role="status">
  <h2 class="instui-heading">New feature</h2>
  <span class="instui-text">This is a violet banner with a custom icon.</span>
  <div class="instui-button-group">
    <button class="instui-button">OK</button>
    <button class="instui-button">Cancel</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">
  This is a sea-colored banner with compact spacing.
</div>

Struchtúr ​

text
.instui-banner
  heading (component, 0..1)
  ‹content›
  button (component, 0..1)
  close-button (component, 0..1)
flowchart TD n0[".instui-banner"]:::cssdoc-root n1(["heading"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot n3(["button"]):::cssdoc-component n4(["close-button"]):::cssdoc-component n0 -.->|0..1| n1 n0 --> n2 n0 -.->|0..1| n3 n0 -.->|0..1| n4 click n1 "/api/css/heading.md" click n3 "/api/css/button.md" click n4 "/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;

Modhnóirí ​

ModhnóirCur síos
.-color-seaCúlra le tint mara agus sampla íocóin.
.-color-violetCúlra le tint violeta agus sampla íocóin.
.-icon-*Malartaigh an ghiolalf info réamhshocraithe le h-íomhán as an tacar íomhán comhroinnte (mar shampla, -icon-megaphone).
.-size-compactSpás inmheánach agus bearna níos dlúithe.
.-size-mdAlias — maps to .-size-relaxed.
.-size-relaxedSpás inmheánach agus bearna níos leithne (réamhshocraithe).
.-size-smAlias — maps to .-size-compact.

Fo-eilimintí ​

Fo-eilimintCur síos
::after—
::before—

Stáit ​

StátCur síos
[aria-disabled="true"]—
:disabled—

Tóicíní a úsáideadh ​

TokenCineálLuach
--instui-component-banner-border-color<color>#5F6E7A1A
--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
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-primary-inverse-active-background<color>#B6CCEA
--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-hover-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-hover-background<color>#D5E2F6
--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-disabled-border-color<color>#8D959F
--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-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
--instui-primitive-color-white<color>#ffffff
--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

Fo-chomhpháirteanna ​

Gaolmhar ​

  • alert — Comhionann nach féidir a dhúnadh, daite de réir stádais, do theachtaireachtaí líneacha.
  • close-button — An rialú dúnála a d’fhéadfadh a bheith sa bhainéar.