BadgeAPI
React 徽章元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
範例
匯入
import Badge from '@mui/joy/Badge';
// or
import { Badge } from '@mui/joy';閱讀這份關於最小化 bundle 大小的指南，以了解差異。
原生元件的 Props 也可使用。
| 名稱 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| anchorOrigin | { horizontal: 'left' | 'right', vertical: 'bottom' | 'top' } | { vertical: 'top', horizontal: 'right', } | 徽章的錨點。 |
| badgeContent | node | '' | 徽章中呈現的內容。 |
| badgeInset | number | string | 0 | 徽章的內縮。支援簡寫語法，如 https://developer.mozilla.org/en-US/docs/Web/CSS/inset 中所述。 |
| children | node | - | 徽章將會相對於此節點新增。 |
| color | 'danger' | 'neutral' | 'primary' | 'success' | 'warning' | string | 'primary' | 元件的顏色。它支援適用於此元件的那些主題顏色。 若要瞭解如何新增自己的顏色，請查看主題元件—延伸顏色。 |
| component | elementType | - | 用於根節點的元件。可以是字串 (使用 HTML 元素) 或元件。 |
| invisible | bool | false | 如果 |
| max | number | 99 | 要顯示的最大計數。 |
| showZero | bool | false | 控制當 |
| size | 'sm' | 'md' | 'lg' | string | 'md' | 元件的尺寸。 若要瞭解如何將自訂尺寸新增至元件，請查看主題元件—延伸尺寸。 |
| slotProps | { badge?: func | object, root?: func | object } | {} | 用於每個內部 slot 的 props。 |
| slots | { badge?: elementType, root?: elementType } | {} | 用於每個內部 slot 的元件。 更多詳細資訊請參閱下方的 Slots API。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及其他 CSS 樣式的系統 prop。 請參閱 `sx` 頁面以取得更多詳細資訊。 |
| variant | 'outlined' | 'plain' | 'soft' | 'solid' | string | 'solid' | 要使用的全域樣式變體。 若要瞭解如何新增自己的樣式變體，請查看主題元件—延伸樣式變體。 |
ref 會轉發到根元素。主題預設 props
您可以使用 JoyBadge 來變更此元件的預設 props （透過主題）。
若要瞭解如何自訂 slot，請查看覆寫元件結構指南。
| Slot 名稱 | 類別名稱 | 預設元件 | 說明 |
|---|---|---|---|
| root | .MuiBadge-root | 'span' | 呈現根元素的元件。 |
| badge | .MuiBadge-badge | 'span' | 呈現徽章元件的元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時套用至元件的 slot。
| 類別名稱 | 規則名稱 | 說明 |
|---|---|---|
| .MuiBadge-anchorOriginBottomLeft | anchorOriginBottomLeft | 如果 anchorOrigin={{ 'bottom', 'left' }}，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-anchorOriginBottomRight | anchorOriginBottomRight | 如果 anchorOrigin={{ 'bottom', 'right' }}，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-anchorOriginTopLeft | anchorOriginTopLeft | 如果 anchorOrigin={{ 'top', 'left' }}，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-anchorOriginTopRight | anchorOriginTopRight | 如果 anchorOrigin={{ 'top', 'right' }}，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-colorContext | colorContext | 當觸發顏色反轉時，套用至根元素的類別名稱。 |
| .MuiBadge-colorDanger | colorDanger | 如果 color="danger"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-colorNeutral | colorNeutral | 如果 color="neutral"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-colorPrimary | colorPrimary | 如果 color="primary"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-colorSuccess | colorSuccess | 如果 color="success"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-colorWarning | colorWarning | 如果 color="warning"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-invisible | invisible | 如果 invisible={true}，則套用至徽章 span 元素的狀態類別。 |
| .MuiBadge-locationInside | locationInside | 如果 location="inside"，則套用至徽章 span 元素的狀態類別。 |
| .MuiBadge-locationOutside | locationOutside | 如果 location="outside"，則套用至徽章 span 元素的狀態類別。 |
| .MuiBadge-sizeLg | sizeLg | 如果 size="lg"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-sizeMd | sizeMd | 如果 size="md"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-sizeSm | sizeSm | 如果 size="sm"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-variantOutlined | variantOutlined | 如果 variant="outlined"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-variantPlain | variantPlain | 如果 variant="plain"，則套用至根元素的類別名稱。 |
| .MuiBadge-variantSoft | variantSoft | 如果 variant="soft"，則套用至徽章 span 元素的類別名稱。 |
| .MuiBadge-variantSolid | variantSolid | 如果 variant="solid"，則套用至徽章 span 元素的類別名稱。 |
您可以使用下列其中一種自訂選項來覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中，將規則名稱作為元件的
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。