CSS: billboard

.instui-billboard — Một khối trạng thái trống lớn hoặc khối kêu gọi hành động: một biểu tượng hoặc hình ảnh nổi bật, một tiêu đề và một thông điệp.

Các phần .hero/.heading/.message được cấu thành bởi markup của người sử dụng, không phải cấu trúc bắt buộc; -clickable chỉ thêm kiểu khi hover, nên mục tiêu click thật sự vẫn cần tabindex và một bộ xử lý bàn phím.

Source: billboard.css

Sử dụng

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

Các ví dụ

<div class="instui-billboard -size-md -clickable" tabindex="0">
  <span class="hero -icon-inbox"></span>
  <div class="heading">No items yet</div>
  <div class="message">Create your first item to get started.</div>
</div>

Cấu trúc

.instui-billboard
  hero (component, 0..1)
  heading (component)
  .message

flowchart TD n0[".instui-billboard"]:::cssdoc-root n1(["hero"]):::cssdoc-component n2(["heading"]):::cssdoc-component n3(".message"):::cssdoc-part n0 -.->|0..1| n1 n0 --> n2 n0 --> n3 click n1 "/api/css/hero.md" click n2 "/api/css/heading.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ả
.-clickable	Kiểu tương tác (có thể click) với phản hồi khi hover.
.-icon-*	Hiển thị một ký tự biểu tượng dẫn đầu trên .hero (ví dụ <span class="hero -icon-inbox"></span>).
.-size-large	Tên dài của {@link -size-lg}.
.-size-lg	Large: roomier spacing with larger heading, message, and hero icon.
.-size-md	Trung (mặc định): khoảng cách tiêu chuẩn với tiêu đề, thông điệp và biểu tượng nổi bật kích thước trung bình.
.-size-medium	Tên dài của {@link -size-md}.
.-size-sm	Small: tighter spacing with smaller heading, message, and hero icon.
.-size-small	Tên dài của {@link -size-sm}.

Phần

Phần	Mô tả
.heading	Tiêu đề billboard.
.hero	Biểu tượng hoặc hình ảnh dẫn đầu tùy chọn.
.message	Thông điệp hỗ trợ.

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-color-text-base	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-component-billboard-background-color	<color>	#00000000
--instui-component-billboard-button-border-radius	<length>	0.5rem
--instui-component-billboard-button-border-style	—	solid
--instui-component-billboard-button-border-width	<length>	0.125rem
--instui-component-billboard-clickable-active-bg	<color>	LightDarklight-dark(#44709F, #2E5177)
--instui-component-billboard-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-billboard-large-margin	<length>	1.5rem
--instui-component-billboard-medium-margin	<length>	0.75rem
--instui-component-billboard-padding-large	<length>	1.5rem
--instui-component-billboard-padding-medium	<length>	1.5rem
--instui-component-billboard-padding-small	<length>	0.75rem
--instui-component-icon-illu-lg	<length>	10rem
--instui-component-icon-illu-md	<length>	5rem
--instui-component-icon-illu-sm	<length>	3rem
--instui-component-link-on-color-text-color	<color>	#ffffff
--instui-component-link-text-color	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-component-text-font-size-x-x-large	<length>	2.375rem
--instui-focus-outline-color	auto | <color>	—
--instui-focus-outline-offset	<length>	—
--instui-focus-outline-style	auto | <outline-line-style>	—
--instui-focus-outline-width	<line-width>	—
--instui-font-size-text-base	<length>	1rem
--instui-font-size-text-sm	<length>	0.875rem
--instui-spacing-space-sm	<length>	0.5rem
--instui-spacing-space-xs	<length>	0.25rem

Hỗ trợ trình duyệt

• Chứa kiểu phần tử của chính nó bằng at-rule CSS @scope; cần Chromium, Firefox hoặc Safari phiên bản gần đây.

Các thành phần phụ

• heading
• hero