CSS: alert

.instui-alert · stable — ข้อความแบบอินไลน์ที่มีแถบสีสถานะและสัญลักษณ์สถานะที่ถูกมาสก์จากชุดไอคอนร่วม

Floating is the default, with an elevated coloured surface and on-colour actions. -inline ใช้พื้นผิวพาสเทล ไม่มีเงา ไอคอนสีตามสถานะ ปุ่มปิดมาตรฐาน การกระทำหลัก และการกระทำรองแบบเทียเตอร์. ปุ่มการกระทำเดียวที่วางตรงจะสร้างแถวหลังข้อความที่ไม่ห่อ; ห่อสองการกระทำไว้ใน .button-group ซึ่งพวกมันจะกลายเป็นรองแล้วจึงเป็นหลัก. ตัวดัดแปลงปุ่มใด ๆ จะยกเลิกการกำหนดตัวแปรอัตโนมัตินี้. ปุ่มปิดโดยตรงจะมีค่าเริ่มต้นเป็นขนาดเล็ก; เพิ่มตัวดัดแปลงขนาดเพื่อแทนที่.

Source: alert.css

TIP

การปรับปรุง JS — CSS ของคอมโพเนนต์นี้แสดงผลและทำงานได้ด้วยตัวเอง; จับคู่กับ @pantoken/interactions เพื่อเพิ่มพฤติกรรมแบบโต้ตอบ ตัวแก้ -timeout ถูกขับเคลื่อนโดยพฤติกรรมนั้น ดู ตารางตัวแก้ด้านล่าง

การเข้าถึง

สำหรับข้อความสำคัญ ให้เพิ่ม role="alert" หรือพื้นที่ aria-live เพื่อให้เทคโนโลยีช่วยเหลือประกาศข้อความ; ควบคุมการปิดเป็นปุ่มปิดที่มีป้ายชื่อ (ตัวอย่างใช้ .instui-close-button ที่มี aria-label="Close")

การใช้งาน

@import "@pantoken/components/components.css";
@import "@pantoken/components/alert.css";

ตัวอย่าง

<div class="instui-alert -icon-megaphone --mb-md">
  การแจ้งเตือนที่ใช้ค่าเริ่มต้น </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  การแจ้งเตือนที่ใช้ค่าเริ่มต้น </div>
<div class="instui-alert -color-success --mb-md">
  ขอแสดงความยินดี! คุณกำลังใช้สี "success".
  <button class="instui-button">ตกลง</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  ขอแสดงความยินดี! คุณกำลังใช้สี "success".
  <button class="instui-button">ตกลง</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  ขอแสดงความยินดี! คุณกำลังใช้สี "success".
  <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>
<div class="instui-alert -color-error -inline --mb-md">
  ขอแสดงความยินดี! คุณกำลังใช้สี "success".
  <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>
<div class="instui-alert -color-warning --mb-md">
  ขอแสดงความยินดี! คุณกำลังใช้สี "success".
  <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>
<div class="instui-alert -color-warning -inline --mb-md">
  ขอแสดงความยินดี! คุณกำลังใช้สี "success".
  <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>

โครงสร้าง

.instui-alert
  ‹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-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot subgraph sg2 subgraph sg3 ["bare-button"] n4["@component button (0..1)"]:::cssdoc-root end subgraph sg5 ["button-group"] n6[".button-group"]:::cssdoc-root n7(["button"]):::cssdoc-component end end n8(["close-button"]):::cssdoc-component n0 --> n1 n6 -->|1..2| n7 n0 --> sg2 n0 -.->|0..1| n8 click n7 "/api/css/button.md" click n8 "/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;

สล็อต

สล็อต	คำอธิบาย
content	เนื้อหาข้อความของการแจ้งเตือน; อาจรวมปุ่มปิด

ตัวปรับแต่ง

ตัวปรับแต่ง	คำอธิบาย
.-color-danger	ข้อความแสดงข้อผิดพลาด
.-color-error	Alias — maps to .-color-danger.
.-color-info	ข้อมูล (ค่าเริ่มต้น)
.-color-success	ข้อความเชิงบวก/ยืนยัน
.-color-warning	ข้อความเตือน
.-has-shadow-false	Alias — maps to .-without-shadow.
.-icon-*	สลับสัญลักษณ์สถานะเป็นไอคอนแบบกำหนดเอง (เช่น -icon-megaphone) ให้คงสีขาวบนแถบสีของรูปแบบ
.-inline	พื้นผิวพาสเทลที่ไม่ยกขึ้นสำหรับจัดวางในลำดับเนื้อหาของเอกสาร.
.-screen-reader-only	ถูกซ่อนทางสายตาแต่ประกาศได้
.-timeout	Interaction — The alert will automatically dismiss after a default of 5 seconds.
.-timeout-1	หนึ่งวินาทีก่อนการปิดโดยอัตโนมัติ
.-timeout-2	สองวินาทีก่อนการปิดโดยอัตโนมัติ
.-timeout-3	สามวินาทีก่อนการปิดโดยอัตโนมัติ
.-timeout-4	สี่วินาทีก่อนการปิดโดยอัตโนมัติ
.-timeout-5	ห้าวินาทีก่อนการปิดโดยอัตโนมัติ
.-variant-error	เลิกใช้ — use .-color-danger.
.-variant-info	เลิกใช้ — use .-color-info.
.-variant-success	เลิกใช้ — use .-color-success.
.-variant-warning	เลิกใช้ — use .-color-warning.
.-without-shadow	เลิกใช้ — use .-inline.

ส่วนประกอบ

ส่วน	คำอธิบาย
.button-group	คอนเทนเนอร์สำหรับคำพูดและการให้เครดิต.

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

องค์ประกอบเทียม	คำอธิบาย
::after	สัญลักษณ์สถานะสีขาว ถูกมาสก์และจัดกึ่งกลางเหนือแถบ
::before	—

สถานะ

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

พร็อพเพอร์ตีที่กำหนดเอง

คุณสมบัติ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
--pantoken-alert-glyph	<url>	—	แหล่งสัญลักษณ์สถานะระดับต่ำ; -icon-<name> ตั้งค่าสำหรับคุณ เขียนทับเพื่อใช้ไอคอนแบบกำหนดเอง (SVG เข้ารหัสเป็น URL)
--pantoken-alert-icon-bg	<color>	—	สีเติมแถบสถานะด้านหลังสัญลักษณ์; แต่ละรูปแบบ -color-* จะตั้งค่าเฉพาะของตน
--timeout	<integer>	—	มิลลิวินาทีก่อนการปิดโดยอัตโนมัติ; 0 ปิดการทำงานนี้ ต้องใช้ชุดโต้ตอบการแจ้งเตือน

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

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-drop-shadow-shadow-color1	<color>	LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-icon-base	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-color-icon-error	<color>	LightDarklight-dark(#C51F22, #FA917F)
--instui-color-icon-info	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-color-icon-on-color	<color>	#ffffff
--instui-color-icon-success	<color>	LightDarklight-dark(#017533, #61C378)
--instui-color-icon-warning	<color>	LightDarklight-dark(#664800, #E0A300)
--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-base	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-interactive-action-primary-base	<color>	LightDarklight-dark(#ffffff, #1D354F)
--instui-component-alert-border-radius	<length>	0.75rem
--instui-component-alert-border-style	—	solid
--instui-component-alert-border-width	<length>	0.0625rem
--instui-component-alert-content-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-alert-content-font-size	<length>	1rem
--instui-component-alert-content-font-weight	<integer>	400
--instui-component-alert-content-line-height	<percentage>	125%
--instui-component-alert-content-padding-horizontal	<length>	0.75rem
--instui-component-alert-content-padding-vertical	<length>	0.75rem
--instui-component-alert-danger-background	<color>	#E62429
--instui-component-alert-danger-background-inline	<color>	LightDarklight-dark(#FFE3DE, #750D0F)
--instui-component-alert-danger-border-color	<color>	#E62429
--instui-component-alert-danger-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-icon-padding-left	<length>	0.75rem
--instui-component-alert-icon-padding-vertical	<length>	1rem
--instui-component-alert-info-background	<color>	#2B7ABC
--instui-component-alert-info-background-inline	<color>	LightDarklight-dark(#DEEBFF, #123E62)
--instui-component-alert-info-border-color	<color>	#2B7ABC
--instui-component-alert-info-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-success-background	<color>	#03893D
--instui-component-alert-success-background-inline	<color>	LightDarklight-dark(#CAF4D0, #01451B)
--instui-component-alert-success-border-color	<color>	#03893D
--instui-component-alert-success-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-warning-background	<color>	LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-background-inline	<color>	LightDarklight-dark(#F7E7CF, #4D3600)
--instui-component-alert-warning-border-color	<color>	LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--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-primary-inverse-active-background	<color>	#E2EAF7
--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-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>	#EEF4FD
--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-active-text-color	<color>	#ffffff
--instui-component-base-button-secondary-on-color-disabled-border-color	<color>	#8D959F
--instui-component-base-button-secondary-on-color-disabled-text-color	<color>	#9EA6AD
--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-shared-tokens-spacing-gap-buttons	<length>	0.75rem
--instui-component-shared-tokens-spacing-general-space-md	<length>	0.75rem
--instui-component-text-base-on-color	<color>	#ffffff
--instui-drop-shadow-blur-elevation4-dropshadow1	<length>	12px
--instui-drop-shadow-spread-elevation4-dropshadow1	<length>	6px
--instui-drop-shadow-y-elevation4-dropshadow1	<length>	8px
--instui-icon-circle-check	<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%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m16%209-5.5%205.5L8%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-circle-x	<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%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-info	<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%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-triangle-alert	<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%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs	<length>	0.25rem
--pantoken-alert-icon-color	<color>	#ffffff
--pantoken-glyph	<url>	url("data:image/svg+xml

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

• button
• close-button

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

• close-button — ควบคุมการปิดที่การแจ้งเตือนอาจมี