ป้าย
คอมโพเนนต์ Badge เป็นตัวบ่งชี้ภาพเล็กๆ ที่สามารถใช้เพื่อสื่อสารข้อมูล สถานะ หรือการแจ้งเตือน มักใช้ร่วมกับองค์ประกอบ UI อื่นๆ เพื่อให้บริบทหรือเน้นข้อมูลสำคัญ ป้ายสามารถปรับแต่งได้ในแง่ของข้อความ สี ขนาด และตำแหน่ง
คุณสมบัติหลัก
- ข้อความ: ป้ายมักมีข้อความสั้นหรือตัวเลขเพื่อสื่อสารข้อมูล
- ตัวแปร: ป้ายสามารถมีโครงร่างสีที่แตกต่างกันเพื่อระบุสถานะต่างๆ เช่น ปิดใช้งาน แบรนด์ เสี่ยง หรือข้อมูล
- ขนาด: ป้ายสามารถมีขนาดที่แตกต่างกันเพื่อให้เหมาะกับความต้องการในการออกแบบต่างๆ (เช่น "big", "small", tiny)
- การจัดตำแหน่ง: ป้ายสามารถจัดตำแหน่งสัมพันธ์กับองค์ประกอบที่แนบอยู่ เช่น ที่มุมขวาบนหรือมุมขวาล่าง
การใช้งานพื้นฐาน
0
0
0
0
0
0
0
0
0
0
vue
<template>
<div>
<spr-badge text="9" variant="neutral" size="big" />
<spr-badge text="9" variant="disabled" size="big" />
<spr-badge text="9" variant="danger" size="big" />
<spr-badge text="9" variant="information" size="big" />
<spr-badge text="9" variant="brand" size="big" />
</div>
<div>
<spr-badge text="9" variant="neutral" size="small" />
<spr-badge text="9" variant="disabled" size="small" />
<spr-badge text="9" variant="danger" size="small" />
<spr-badge text="9" variant="information" size="small" />
<spr-badge text="9" variant="brand" size="small" />
</div>
<div>
<spr-badge variant="neutral" size="tiny" />
<spr-badge variant="disabled" size="tiny" />
<spr-badge variant="danger" size="tiny" />
<spr-badge variant="information" size="tiny" />
<spr-badge variant="brand" size="tiny" />
</div>
</template>ตัวแปร
ใช้เพื่อปรับแต่งพื้นหลังของป้าย
9
9
9
9
9
vue
<template>
<div>
<spr-badge text="9" variant="neutral" size="big" />
<spr-badge text="9" variant="disabled" size="big" />
<spr-badge text="9" variant="danger" size="big" />
<spr-badge text="9" variant="information" size="big" />
<spr-badge text="9" variant="brand" size="big" />
</div>
</template>ขนาด
0
30
vue
<template>
<div>
<spr-badge text="4" variant="information" size="tiny" />
<spr-badge text="0" variant="information" size="small" />
<spr-badge text="30" variant="information" size="big" />
</div>
</template>ตำแหน่ง
ใช้เพื่อแสดงป้ายในตำแหน่งที่แตกต่างกัน (บน ล่าง)
top
9
top
9
top
top
9
top
9
top
bottom
9
bottom
9
bottom
default
9
default
9
default
vue
<template>
<div>
<spr-badge text="9" variant="neutral" size="big" position="top">
<spr-lozenge label="top" />
</spr-badge>
<spr-badge text="9" variant="neutral" size="small" position="top">
<spr-lozenge label="top" />
</spr-badge>
<spr-badge text="9" variant="neutral" size="tiny" position="top">
<spr-lozenge label="top" />
</spr-badge>
</div>
<div>
<spr-badge text="9" variant="brand" size="big" position="top">
<spr-lozenge label="top" />
</spr-badge>
<spr-badge text="9" variant="brand" size="small" position="top">
<spr-lozenge label="top" />
</spr-badge>
<spr-badge text="9" variant="brand" size="tiny" position="top">
<spr-lozenge label="top" />
</spr-badge>
</div>
<div>
<spr-badge text="9" variant="information" size="big" position="bottom">
<spr-lozenge label="bottom" />
</spr-badge>
<spr-badge text="9" variant="information" size="small" position="bottom">
<spr-lozenge label="bottom" />
</spr-badge>
<spr-badge text="9" variant="information" size="tiny" position="bottom">
<spr-lozenge label="bottom" />
</spr-badge>
</div>
<div>
<spr-badge text="9" variant="danger" size="big">
<spr-lozenge label="default" />
</spr-badge>
<spr-badge text="9" variant="danger" size="small">
<spr-lozenge label="default" />
</spr-badge>
<spr-badge text="9" variant="danger" size="tiny">
<spr-lozenge label="default" />
</spr-badge>
</div>
</template>ตำแหน่งเริ่มต้นโดยใช้สล็อต
เมื่อใช้ตำแหน่งเริ่มต้น คุณสามารถใช้สล็อตเพื่อห่อหุ้มองค์ประกอบที่คุณต้องการแนบป้าย
top
9
top
9
top
vue
<template>
<div>
<spr-badge text="9" variant="brand" size="big" position="top">
<spr-lozenge label="top" />
</spr-badge>
<spr-badge text="9" variant="brand" size="small" position="top">
<spr-lozenge label="top" />
</spr-badge>
<spr-badge text="9" variant="brand" size="tiny" position="top">
<spr-lozenge label="top" />
</spr-badge>
</div>
</template>API Reference
Props
| ชื่อ | คำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| text | เนื้อหาที่แสดงภายในป้าย โดยปกติจะเป็นข้อความสั้นหรือตัวเลขที่แสดงถึงจำนวน การแจ้งเตือน หรือตัวบ่งชี้สถานะ โปรดทราบว่าหากขนาดถูกตั้งเป็น tiny ข้อความจะไม่ถูกแสดง | string | '0' |
| variant | กำหนดโครงร่างสีและสไตล์ภาพของป้ายเพื่อระบุสถานะต่างๆ:
| 'brand' | 'information' | 'danger' | 'disabled' | 'brand' |
| size | ควบคุมขนาดของป้าย:
| 'big' | 'small' | 'tiny' | 'small' |
| position | กำหนดตำแหน่งของป้ายสัมพันธ์กับคอนเทนเนอร์หรือเนื้อหาที่สล็อต:
top หรือ bottom คุณควรใช้สล็อตเริ่มต้นเพื่อห่อหุ้มองค์ประกอบที่ป้ายจะถูกแนบ | 'top' | 'bottom' | 'default' | 'default' |
Slots
| ชื่อ | คำอธิบาย |
|---|---|
| default | เนื้อหาที่ป้ายจะถูกแนบ สิ่งนี้จำเป็นเมื่อใช้ตำแหน่ง top หรือ bottom ป้ายจะถูกจัดตำแหน่งสัมพันธ์กับเนื้อหานี้ หากไม่มีการระบุเนื้อหาสล็อต ป้ายจะถูกแสดงเป็นองค์ประกอบแบบสแตนด์อโลน |
การใช้ผลิตภัณฑ์
