CSS: banner

.instui-banner · alpha — พื้นที่ข้อความที่มีไอคอนและปิดได้ สำหรับประกาศระดับหน้า หรือประกาศในบริบทใกล้เคียง

ขนาด ควบคุมระยะบุ (padding) และช่องว่าง: relaxed (ค่าเริ่มต้น) มีพื้นที่กว้างขึ้น; compact ทำให้ทั้งสองแคบลง สี กำหนดพื้นหลัง: แบบเปลือย (ไม่มีตัวแก้ไข) จะไม่มีการเติม — มีเฉพาะขอบและไอคอน; -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">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>

โครงสร้าง

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;

ตัวปรับแต่ง

ตัวปรับแต่ง	คำอธิบาย
`.-color-sea`	พื้นหลังและตัวอย่างไอคอนมีโทนสีทะเล
`.-color-violet`	พื้นหลังและตัวอย่างไอคอนมีโทนสีม่วง
`.-icon-*`	เปลี่ยนสัญลักษณ์เริ่มต้น `info` เป็นไอคอนจากชุดไอคอนที่ใช้ร่วมกัน (เช่น `-icon-megaphone`)
`.-size-compact`	ระยะบุและช่องว่างแคบลง
`.-size-md`	Alias — maps to `.-size-relaxed`.
`.-size-relaxed`	ระยะบุและช่องว่างกว้างขึ้น (ค่าเริ่มต้น)
`.-size-sm`	Alias — maps to `.-size-compact`.

องค์ประกอบเทียม

องค์ประกอบเทียม	คำอธิบาย
`::after`	—
`::before`	—

สถานะ

สถานะ	คำอธิบาย
`[aria-disabled="true"]`	—
`:disabled`	—

โทเค็นที่ใช้

Token	ชนิด	ค่า
`--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`

ส่วนประกอบย่อย

ที่เกี่ยวข้อง

alert — ภาคพี่น้องแบบแต้มสีสถานะที่ไม่สามารถปิดได้ สำหรับข้อความแบบอินไลน์
close-button — ควบคุมการปิดที่แบนเนอร์อาจรวมไว้

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

ส่วนประกอบ

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

เครื่องมือช่วย

กฎ

Plugins

layout

CSS: banner

การเข้าถึง

การใช้งาน

ตัวอย่าง

Sea colored and compact spacing

โครงสร้าง

ตัวปรับแต่ง

องค์ประกอบเทียม

สถานะ

โทเค็นที่ใช้

ส่วนประกอบย่อย

ที่เกี่ยวข้อง

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: banner ​

การเข้าถึง ​

การใช้งาน ​

ตัวอย่าง ​

Sea colored and compact spacing

โครงสร้าง ​

ตัวปรับแต่ง ​

องค์ประกอบเทียม ​

สถานะ ​

โทเค็นที่ใช้ ​

ส่วนประกอบย่อย ​

ที่เกี่ยวข้อง ​

CSS: banner

การเข้าถึง

การใช้งาน

ตัวอย่าง

โครงสร้าง

ตัวปรับแต่ง

องค์ประกอบเทียม

สถานะ

โทเค็นที่ใช้

ส่วนประกอบย่อย

ที่เกี่ยวข้อง