Badge 徽章
Badge 徽章組件用於在圖標或文本旁邊顯示計數或狀態信息。
基本用法
基本的徽章展示，可以包含數字或文字。
5
New
12
自定義顏色
Badge 徽章組件支持自定義背景顏色和文本顏色。
8
7
9
顯示與隱藏
可以通過 show 屬性控制徽章的顯示和隱藏。
Current state: Visible
8
New
自定義內容
可以通過 content 插槽自定義徽章的內容。
NEW
🔥
API
屬性
| 屬性名 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| value | 徽章顯示的內容 | string | number | '' |
| color | 徽章背景顏色 | string | '' (默認使用 status.danger 主題顏色) |
| textColor | 徽章文本顏色 | string | '' (默認為白色) |
| isDot | 是否顯示為小圓點 | boolean | false |
| max | 最大值，超過最大值會顯示 '{max}+' | number | Infinity |
| show | 是否顯示徽章 | boolean | true |
事件
| 事件名 | 說明 | 回調參數 |
|---|---|---|
| click | 點擊徽章時觸發 | (event: MouseEvent) => void |
插槽
| 插槽名 | 說明 |
|---|---|
| default | 徽章依附的內容 |
| content | 自定義徽章內容 |