CSS: badge ​

.instui-badge — จุดเล็ก ๆ สำหรับแสดงจำนวนหรือสถานะ วางไว้บนมุมของเป้าหมาย

เมื่อต้องการวางแบดจ์ทับเป้าหมาย ให้ห่อทั้งสองด้วย .instui-badge-wrapper (เป็นจุดยึดตำแหน่ง) และตรึงแบดจ์ด้วยตัวดัดแปลง -placement-*

Source: badge.css

การใช้งาน ​

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

สาธิต ​

ตัวอย่าง ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

โครงสร้าง ​

แบดจ์จะแสดงแบบอินไลน์ด้วยตัวมันเอง หรืออยู่ภายใน instui-badge-wrapper ที่เป็นทางเลือกซึ่งยึดมันไว้เหนือตัวเป้าหมาย

text
.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge
flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

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

ตัวปรับแต่งคำอธิบาย
.-color-dangerจำนวนที่แสดงการเตือน/ข้อผิดพลาด
.-color-inverseOn-dark: a light chip with dark text.
.-color-successจำนวนที่แสดงความสำเร็จ/สมบูรณ์
.-placement-bottom-endวางที่มุมด้านล่าง-ปลาย
.-placement-bottom-startวางที่มุมด้านล่าง-เริ่ม
.-placement-end-centerจัดกึ่งกลางบนขอบด้านปลาย
.-placement-start-centerจัดกึ่งกลางบนขอบด้านเริ่ม
.-placement-top-endวางที่มุมด้านบน-ปลาย
.-placement-top-startวางที่มุมด้านบน-เริ่ม
.-pulseวงแหวนเน้นความสนใจที่มีจังหวะกระพริบ
.-standaloneแสดงแบบอินไลน์ ไม่ได้วางทับมุมของเป้าหมาย
.-type-notificationเป็นเพียงจุด ไม่มีตัวเลข

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

องค์ประกอบเทียมคำอธิบาย
::beforeวงแหวนเน้นความสนใจแบบกระพริบ วาดด้วยสีเน้นของแบดจ์ (ตัวแปร -pulse)

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

คุณสมบัติชนิดค่าเริ่มต้นคำอธิบาย
--pantoken-badge-accent<color>—สีพื้นของชิป; ตัวแปร -color-* แต่ละตัวและวงแหวนพัลส์อ่านค่าสีจากตรงนี้
--pantoken-badge-text<color>—สีของข้อความ จับคู่กับสีเน้นเพื่อให้ยังคงอ่านได้ชัดเจน

แอนิเมชัน ​

แอนิเมชันคำอธิบาย
pantoken-badge-pulseแอนิเมชันของวงแหวนพัลส์

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

Tokenชนิดค่า
--instui-border-width-md<length>0.125rem
--instui-component-badge-border-radius<length>999rem
--instui-component-badge-color<color>#ffffff
--instui-component-badge-color-danger<color>#E62429
--instui-component-badge-color-inverse<color>#273540
--instui-component-badge-color-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success<color>#03893D
--instui-component-badge-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size<length>0.75rem
--instui-component-badge-font-weight<integer>600
--instui-component-badge-padding<length>0.25rem
--instui-component-badge-size<length>1rem
--instui-spacing-space-sm<length>0.5rem

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

  • pill — ภาคสหายแบบป้าย-ชิปแบบอินไลน์