CSS: banner ​

.instui-banner · alpha — पेज-स्तरीय या संदर्भ-भीतरी घोषणाओं के लिए एक बंद करने योग्य, आइकनयुक्त संदेश सतह।

Size पैडिंग और गैप को नियंत्रित करता है: relaxed (डिफ़ॉल्ट) अधिक फुर्सत देता है; compact दोनों को घटाता है। Color भराव सेट करता है: bare (कोई मॉडिफायर नहीं) बिना भरे हुए — केवल बॉर्डर और आइकन; -color-violet और -color-sea एक टिंटेड बैकग्राउंड और मेल खाने वाला आइकन स्वैच जोड़ते हैं।

एक्सेसिबिलिटी ​

सहायक टेक्नॉलॉजी को बैनर की घोषणा करने के लिए role="status" जोड़ें (या तात्कालिक संदेशों के लिए role="alert") ; सजावटी आइकन को aria-hidden="true" के रूप में चिह्नित करें और क्लोज बटन को aria-label दें।

उपयोग ​

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

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

उदाहरण ​

html
<div class="instui-banner -icon-canvas-icon-reversed" role="status">
  <h2 class="instui-heading">नई सुविधा</h2>
  <span class="instui-text">यह एक बैंगनी बैनर है जिसमें एक कस्टम आइकन है।</span>
  <div class="button-group">
    <button class="instui-button">रद्द करें</button>
    <button class="instui-button">ठीक है</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

संरचना ​

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;

मॉडिफायर ​

मॉडिफायरविवरण
.-color-seaसमुद्री-टिंटेड बैकग्राउंड और आइकन स्वैच।
.-color-violetबैंगनी-टिंटेड बैकग्राउंड और आइकन स्वैच।
.-icon-*डिफ़ॉल्ट info ग्लाइफ़ को साझा आइकन सेट से किसी आइकन से बदलें (उदाहरण के लिए, -icon-megaphone)।
.-size-compactकम पैडिंग और गैप।
.-size-mdAlias — maps to .-size-relaxed.
.-size-relaxedअधिक फुर्सत वाली पैडिंग और गैप (डिफ़ॉल्ट)।
.-size-smAlias — maps to .-size-compact.

पार्ट्स ​

भागविवरण
.button-groupउद्धरण और श्रेय के लिए कंटेनर।

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::after—
::before—

स्टेट्स ​

स्थितिविवरण
[aria-disabled="true"]—
:disabled—

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--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

सबकम्पोनेन्ट्स ​

संबंधित ​

  • alert — इनलाइन संदेशों के लिए एक नॉन-डिस्मिसिबल, स्टेटस-रंगीन समकक्ष।
  • close-button — वह डिस्मिस कंट्रोल जिसे एक बैनर शामिल कर सकता है।