CSS: alert

.instui-alert · stable — Một thông báo nội tuyến với thanh màu trạng thái và một biểu tượng trạng thái được che mặt từ bộ biểu tượng chia sẻ.

Chế độ Floating là mặc định, với bề mặt có màu được nâng cao và các hành động cùng tông màu. -inline sử dụng bề mặt tông pastel, không có bóng, biểu tượng theo màu trạng thái, nút đóng tiêu chuẩn, hành động chính và hành động phụ bậc ba. Một nút hành động trực tiếp duy nhất tạo thành một hàng sau văn bản không ngắt; đặt hai hành động vào .button-group, nơi chúng trở thành thứ cấp rồi chính. Bất kỳ bộ điều chỉnh nút nào cũng sẽ chọn ra khỏi việc gán biến thể tự động này. Nút đóng trực tiếp mặc định là nhỏ; thêm bộ điều chỉnh kích thước để ghi đè.

Source: alert.css

TIP

Nâng cao JS — CSS của thành phần này hiển thị và hoạt động độc lập; ghép nó với @pantoken/interactions để thêm hành vi tương tác. Bộ sửa -timeout của nó được điều khiển bởi hành vi đó. Xem bảng bộ sửa phía dưới.

Khả năng truy cập

Đối với một thông báo quan trọng, thêm role="alert" hoặc một vùng aria-live để công nghệ hỗ trợ thông báo; điều khiển thu hồi là một nút đóng có nhãn (ví dụ .instui-close-button trong ví dụ mang aria-label="Close").

Sử dụng

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

Các ví dụ

<div class="instui-alert -icon-megaphone --mb-md">
  Một cảnh báo với mặc định </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  Một cảnh báo với mặc định </div>
<div class="instui-alert -color-success --mb-md">
  Xin chúc mừng! Bạn đang sử dụng màu "success".
  <button class="instui-button">Đồng ý</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  Xin chúc mừng! Bạn đang sử dụng màu "success".
  <button class="instui-button">Đồng ý</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  Xin chúc mừng! Bạn đang sử dụng màu "success".
  <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>
<div class="instui-alert -color-error -inline --mb-md">
  Xin chúc mừng! Bạn đang sử dụng màu "success".
  <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>
<div class="instui-alert -color-warning --mb-md">
  Xin chúc mừng! Bạn đang sử dụng màu "success".
  <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>
<div class="instui-alert -color-warning -inline --mb-md">
  Xin chúc mừng! Bạn đang sử dụng màu "success".
  <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

.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;

Các slot

Slot	Mô tả
content	Nội dung thông báo của alert; có thể bao gồm một nút thu hồi.

Bộ sửa

Bộ sửa	Mô tả
.-color-danger	Một thông báo lỗi.
.-color-error	Alias — maps to .-color-danger.
.-color-info	Thông tin (mặc định).
.-color-success	Một thông báo tích cực/xác nhận.
.-color-warning	Một thông báo cảnh báo.
.-has-shadow-false	Alias — maps to .-without-shadow.
.-icon-*	Thay biểu tượng trạng thái bằng một biểu tượng tùy chỉnh (ví dụ -icon-megaphone), giữ màu trắng trên thanh màu của biến thể.
.-inline	Một bề mặt tông pastel không nâng cao để đặt trong luồng tài liệu.
.-screen-reader-only	Ẩn về mặt hiển thị nhưng được thông báo.
.-timeout	Interaction — The alert will automatically dismiss after a default of 5 seconds.
.-timeout-1	Một giây trước khi tự động thu hồi.
.-timeout-2	Hai giây trước khi tự động thu hồi.
.-timeout-3	Ba giây trước khi tự động thu hồi.
.-timeout-4	Bốn giây trước khi tự động thu hồi.
.-timeout-5	Năm giây trước khi tự động thu hồi.
.-variant-error	Không khuyến nghị — use .-color-danger.
.-variant-info	Không khuyến nghị — use .-color-info.
.-variant-success	Không khuyến nghị — use .-color-success.
.-variant-warning	Không khuyến nghị — use .-color-warning.
.-without-shadow	Không khuyến nghị — use .-inline.

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	Biểu tượng trạng thái màu trắng, được che mặt và căn giữa trên thanh.
::before	—

Trạng thái

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

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--pantoken-alert-glyph	<url>	—	Nguồn biểu tượng trạng thái mức thấp; -icon-<name> sẽ thiết lập nó cho bạn. Ghi đè để dùng biểu tượng tùy chỉnh (SVG được mã hóa URL).
--pantoken-alert-icon-bg	<color>	—	Màu tô nền của thanh trạng thái phía sau biểu tượng; mỗi biến thể -color-* thiết lập riêng.
--timeout	<integer>	—	Số mili-giây trước khi tự động thu hồi; 0 vô hiệu hóa nó. Yêu cầu gói tương tác alert.

Token tiêu thụ

Token	Kiểu	Giá trị
--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

Các thành phần phụ

• button
• close-button

Liên quan

• close-button — Điều khiển thu hồi mà một alert có thể bao gồm.