徽章
Badge 組件會產生一個附加到其子元素的小標籤。
Badge API
匯入
import { Badge } from '@mui/base/Badge';
// or
import { Badge } from '@mui/base';請閱讀這份關於最小化套件大小的指南，以了解差異。
原生組件的屬性也可用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| badgeContent | 節點 | - | 在徽章內呈現的內容。 |
| children | 節點 | - | 徽章將相對於此節點添加。 |
| invisible | 布林值 | false | 如果為 |
| max | 數字 | 99 | 要顯示的最大計數。 |
| showZero | 布林值 | false | 控制當 |
| slotProps | { badge?: 函式 | 物件, root?: 函式 | 物件 } | {} | 用於 Badge 內部每個插槽的屬性。 |
| slots | { badge?: 元素類型, root?: 元素類型 } | {} | 用於 Badge 內部每個插槽的組件。可以是字串以使用 HTML 元素或組件。 請參閱下方的 Slots API 以了解更多詳細資訊。 |
ref 被轉發到根元素。
若要了解如何自訂插槽，請查看Overriding component structure 指南。
| 插槽名稱 | 類別名稱 | 預設組件 | 描述 |
|---|---|---|---|
| root | .base-Badge-root | 'span' | 呈現根元素的組件。 |
| badge | .base-Badge-badge | 'span' | 呈現徽章的組件。 |
這些類別名稱對於使用 CSS 進行樣式設定很有用。當觸發特定狀態時，它們會應用於組件的插槽。
| 類別名稱 | 描述 |
|---|---|
| .base-Badge-invisible | 如果 invisible={true}，則狀態類別會應用於徽章 span 元素。 |