BadgeUnstyled API
Documentação da API para o componente React BadgeUnstyled . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import BadgeUnstyled from '@mui/core/BadgeUnstyled';
// ou
import { BadgeUnstyled } from '@mui/core';Propriedades
Props of the nativo component are also available.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| anchorOrigin | { horizontal: 'left' | 'right', vertical: 'bottom' | 'top' } | { vertical: 'top', horizontal: 'right', } | The anchor of the badge. |
| badgeContent | node | The content rendered within the badge. | |
| children | node | The badge will be added relative to this node. | |
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| components | { Badge?: elementType, Root?: elementType } | {} | The components used for each slot inside the Badge. Either a string to use a HTML element or a component. |
| componentsProps | object | {} | The props used for each slot inside the Badge. |
| invisible | bool | false | If true, the badge is invisible. |
| max | number | 99 | Max count to show. |
| overlap | 'circular' | 'rectangular' | 'rectangular' | Wrapped shape the badge should overlap. |
| showZero | bool | false | Controls whether the badge is hidden when badgeContent is zero. |
| variant | string | 'standard' | A variante a usar. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiBadge-root | Styles applied to the root element. |
| badge | .MuiBadge-badge | Class name applied to the badge `span` element. |
| dot | .MuiBadge-dot | Class name applied to the badge `span` element if variant="dot". |
| standard | .MuiBadge-standard | Class name applied to the badge `span` element if variant="standard". |
| anchorOriginTopRightRectangular | .MuiBadge-anchorOriginTopRightRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }} overlap="rectangular". |
| anchorOriginBottomRightRectangular | .MuiBadge-anchorOriginBottomRightRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular". |
| anchorOriginTopLeftRectangular | .MuiBadge-anchorOriginTopLeftRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }} overlap="rectangular". |
| anchorOriginBottomLeftRectangular | .MuiBadge-anchorOriginBottomLeftRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular". |
| anchorOriginTopRightCircular | .MuiBadge-anchorOriginTopRightCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }} overlap="circular". |
| anchorOriginBottomRightCircular | .MuiBadge-anchorOriginBottomRightCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }} overlap="circular". |
| anchorOriginTopLeftCircular | .MuiBadge-anchorOriginTopLeftCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }} overlap="circular". |
| anchorOriginBottomLeftCircular | .MuiBadge-anchorOriginBottomLeftCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }} overlap="circular". |
| invisible | .MuiBadge-invisible | Pseudo-class aplicada a the badge `span` element se invisible={true}. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.