CSS: banner

.instui-banner · alpha — Một bề mặt thông báo có biểu tượng và có thể đóng được dành cho thông báo cấp trang hoặc thông báo trong ngữ cảnh.

Size điều khiển padding và gap: relaxed (mặc định) rộng rãi hơn; compact làm cả hai chặt hơn. Color đặt phần nền: bare (không có modifier) không có nền — chỉ có viền và biểu tượng; -color-violet và -color-sea thêm nền pha màu cùng bảng màu biểu tượng tương ứng.

Khả năng truy cập

Thêm role="status" (hoặc role="alert" cho thông báo khẩn) để công nghệ hỗ trợ thông báo banner; đánh dấu biểu tượng trang trí là aria-hidden="true" và đặt cho nút đóng một aria-label.

Sử dụng

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

css

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

Các ví dụ

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>

Cấu trúc

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;

Bộ sửa

Bộ sửa	Mô tả
`.-color-sea`	Nền pha màu biển và bảng màu biểu tượng.
`.-color-violet`	Nền pha màu tím và bảng màu biểu tượng.
`.-icon-*`	Thay glyph `info` mặc định bằng một biểu tượng từ bộ biểu tượng chia sẻ (ví dụ, `-icon-megaphone`).
`.-size-compact`	Padding và gap chặt hơn.
`.-size-md`	Alias — maps to `.-size-relaxed`.
`.-size-relaxed`	Padding và gap rộng hơn (mặc định).
`.-size-sm`	Alias — maps to `.-size-compact`.

Phần tử giả

Phần tử giả	Mô tả
`::after`	—
`::before`	—

Trạng thái

Trạng thái	Mô tả
`[aria-disabled="true"]`	—
`:disabled`	—

Token tiêu thụ

Token	Kiểu	Giá trị
`--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>`	LightDark`light-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>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-component-banner-sea-icon-background`	`<color>`	`#00828E`
`--instui-component-banner-violet-background`	`<color>`	LightDark`light-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`

Các thành phần phụ

Liên quan

alert — Một phiên bản không thể đóng, có màu trạng thái dành cho thông báo nội tuyến.
close-button — Điều khiển đóng mà banner có thể bao gồm.

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

Các thành phần

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

Tiện ích

Quy tắc

Plugins

layout

CSS: banner

Khả năng truy cập

Sử dụng

Các ví dụ

Sea colored and compact spacing

Cấu trúc

Bộ sửa

Phần tử giả

Trạng thái

Token tiêu thụ

Các thành phần phụ

Liên quan

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: banner ​

Khả năng truy cập ​

Sử dụng ​

Các ví dụ ​

Sea colored and compact spacing

Cấu trúc ​

Bộ sửa ​

Phần tử giả ​

Trạng thái ​

Token tiêu thụ ​

Các thành phần phụ ​

Liên quan ​

CSS: banner

Khả năng truy cập

Sử dụng

Các ví dụ

Cấu trúc

Bộ sửa

Phần tử giả

Trạng thái

Token tiêu thụ

Các thành phần phụ

Liên quan