CSS: billboard ​

.instui-billboard — บล็อกสถานะว่างขนาดใหญ่หรือบล็อกเรียกร้องให้กระทำ: ไอคอนหรือภาพฮีโร่ หัวเรื่อง และข้อความ.

ส่วน .hero/.heading/.message ถูกประกอบโดยมาร์กอัปของผู้บริโภค ไม่ใช่โครงสร้างที่บังคับ; -clickable เพิ่มเพียงสไตล์เมื่อโฮเวอร์ ดังนั้นเป้าหมายการคลิกจริงยังต้องมี tabindex และตัวจัดการคีย์บอร์ด.

Source: billboard.css

การใช้งาน ​

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

ตัวอย่าง ​

html
<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>

โครงสร้าง ​

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

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

ตัวปรับแต่งคำอธิบาย
.-clickableสไตล์เชิงโต้ตอบ (คลิกได้) พร้อมฟีดแบ็กเมื่อโฮเวอร์.
.-icon-*แสดงไอคอนนำบน .hero (เช่น <span class="hero -icon-inbox"></span>).
.-size-largeชื่อเต็มที่เป็นนามแฝงของ {@link -size-lg}.
.-size-lgLarge: roomier spacing with larger heading, message, and hero icon.
.-size-mdขนาดกลาง (ค่าเริ่มต้น): ระยะห่างมาตรฐาน พร้อมหัวเรื่องขนาดกลาง ข้อความ และไอคอนฮีโร่.
.-size-mediumชื่อเต็มที่เป็นนามแฝงของ {@link -size-md}.
.-size-smSmall: tighter spacing with smaller heading, message, and hero icon.
.-size-smallชื่อเต็มที่เป็นนามแฝงของ {@link -size-sm}.

ส่วนประกอบ ​

ส่วนคำอธิบาย
.headingหัวเรื่องของบิลบอร์ด.
.heroไอคอนหรือภาพนำที่เป็นทางเลือก.
.messageข้อความสนับสนุน.

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

Tokenชนิดค่า
--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-colorauto | <color>—
--instui-focus-outline-offset<length>—
--instui-focus-outline-styleauto | <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

รองรับเบราว์เซอร์ ​

  • มีสไตล์ขององค์ประกอบอยู่ภายในด้วยกฎ CSS @scope; ต้องการ Chromium, Firefox, หรือ Safari เวอร์ชันใหม่.

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