Skeleton API
Documentação da API para o componente React Skeleton . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import Skeleton from '@mui/material/Skeleton';
// ou
import { Skeleton } from '@mui/material';
Nome do componente
The nameMuiSkeleton
can be used when providing default props or style overrides in the theme.Propriedades
Props of the nativo component are also available.
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
animation | 'pulse' | 'wave' | false | 'pulse' | The animation. If false the animation effect is disabled. |
children | node | Optional children to infer width and height from. | |
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. | |
height | number | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
variant | 'circular' | 'rectangular' | 'text' | string | 'text' | The type of content that will be rendered. |
width | number | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. |
O
ref
é encaminhado para o elemento raiz.CSS
Nome da regra | Classe global | Descrição |
---|---|---|
root | .MuiSkeleton-root | Estilos aplicados ao elemento raiz. |
text | .MuiSkeleton-text | Estilos aplicados para o elemento raiz se variant="text" . |
rectangular | .MuiSkeleton-rectangular | Estilos aplicados para o elemento raiz se variant="rectangular" . |
circular | .MuiSkeleton-circular | Estilos aplicados para o elemento raiz se variant="circular" . |
pulse | .MuiSkeleton-pulse | Estilos aplicados para o elemento raiz se animation="pulse" . |
wave | .MuiSkeleton-wave | Estilos aplicados para o elemento raiz se animation="wave" . |
withChildren | .MuiSkeleton-withChildren | Styles applied when the component is passed children. |
fitContent | .MuiSkeleton-fitContent | Styles applied when the component is passed children and no width. |
heightAuto | .MuiSkeleton-heightAuto | Styles applied when the component is passed children and no height. |
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
styleOverrides
property in a custom theme.