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">Tính năng mới</h2>
  <span class="instui-text">Đây là một biểu ngữ màu tím với một biểu tượng tùy chỉnh.</span>
  <div class="button-group">
    <button class="instui-button">Hủy</button>
    <button class="instui-button">Đồng ý</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Cấu trúc

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;

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

Phần	Mô tả
`.button-group`	Khung chứa cho trích dẫn và nguồn.

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-color-background-interactive-action-primary-active`	`<color>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-background-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-background-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-stroke-interactive-action-primary-active`	`<color>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-stroke-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-stroke-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-text-interactive-action-primary-base`	`<color>`	LightDark`light-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>`	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.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>`	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-disabled-background-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-disabled-text-color`	`<color>`	LightDark`light-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>`	LightDark`light-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>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-tertiary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-tertiary-disabled-text-color`	`<color>`	LightDark`light-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>`	LightDark`light-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`

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.

Các thành phần

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

Tiện ích

Quy tắc

Khai báo

Plugins

layout

CSS: banner

Khả năng truy cập

Sử dụng

Các ví dụ

Cấu trúc

Bộ sửa

Phần

Phần tử giả

Trạng thái

Token tiêu thụ

Các thành phần phụ

Liên quan

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

CSS: banner ​

Khả năng truy cập ​

Sử dụng ​

Các ví dụ ​

Cấu trúc ​

Bộ sửa ​

Phần ​

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

Phần tử giả

Trạng thái

Token tiêu thụ

Các thành phần phụ

Liên quan