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

Một -icon-<name> tùy chỉnh thay thế biểu tượng trạng thái nhưng giữ lại thanh màu của biến thể; độ tô thanh được khôi phục với tính đặc hiệu cao hơn để bộ vẽ biểu tượng chia sẻ không sử dụng nó. Nút đóng trực tiếp mặc định là nhỏ; thêm một bộ sửa 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

css

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

Các ví dụ

html

<div class="instui-alert -icon-megaphone --mb-md">
  An alert with the default <code>info</code> color, and a custom icon.
</div>
<div class="instui-alert -color-success">
  Congratulations! You're using the "success" color.
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Cấu trúc

text

.instui-alert
  ‹content›
  close-button (component, 0..1)

flowchart TD n0[".instui-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(["close-button"]):::cssdoc-component n0 --> n1 n0 -.->|0..1| n2 click n2 "/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-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ể.
`.-render-custom-icon-*`	Không khuyến nghị — The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.
`.-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`	Loại bỏ bóng nâng mặc định (InstUI `hasShadow={false}`).

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`	Thanh trạng thái có màu của biến thể, sát mép bắt đầu bo tròn.

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-component-alert-background`	`<color>`	LightDark`light-dark(#ffffff, #171B21)`
`--instui-component-alert-border-radius`	`<length>`	`0.75rem`
`--instui-component-alert-border-style`	—	`solid`
`--instui-component-alert-border-width`	`<length>`	`0.125rem`
`--instui-component-alert-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--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>`	`1.5rem`
`--instui-component-alert-content-padding-vertical`	`<length>`	`0.75rem`
`--instui-component-alert-danger-border-color`	`<color>`	`#E62429`
`--instui-component-alert-danger-icon-background`	`<color>`	`#E62429`
`--instui-component-alert-icon-color`	`<color>`	`#ffffff`
`--instui-component-alert-info-border-color`	`<color>`	`#2B7ABC`
`--instui-component-alert-info-icon-background`	`<color>`	`#2B7ABC`
`--instui-component-alert-success-border-color`	`<color>`	`#03893D`
`--instui-component-alert-success-icon-background`	`<color>`	`#03893D`
`--instui-component-alert-warning-border-color`	`<color>`	`#CF4A00`
`--instui-component-alert-warning-icon-background`	`<color>`	`#CF4A00`
`--instui-component-base-button-medium-height`	`<length>`	`2.5rem`
`--instui-component-base-button-small-height`	`<length>`	`2rem`
`--instui-elevation-above`	`none \| <shadow>#`	—
`--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%22m9%2012%202%202%204-4%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-glyph`	`<url>`	`url("data:image/svg+xml`

Các thành phần phụ

close-button

Liên quan

close-button — Điều khiển thu hồi mà một alert 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: alert

Khả năng truy cập

Sử dụng

Các ví dụ

Cấu trúc

Các slot

Bộ sửa

Phần tử giả

Thuộc tính tuỳ chỉnh

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: alert ​

Khả năng truy cập ​

Sử dụng ​

Các ví dụ ​

Cấu trúc ​

Các slot ​

Bộ sửa ​

Phần tử giả ​

Thuộc tính tuỳ chỉnh ​

Token tiêu thụ ​

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

Liên quan ​

CSS: alert

Khả năng truy cập

Sử dụng

Các ví dụ

Cấu trúc

Các slot

Bộ sửa

Phần tử giả

Thuộc tính tuỳ chỉnh

Token tiêu thụ

Các thành phần phụ

Liên quan