Pular para o conteúdo

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';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiSkeleton can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
animation'pulse'
| 'wave'
| false
'pulse'
The animation. If false the animation effect is disabled.
childrennode
Optional children to infer width and height from.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
heightnumber
| string
Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
sxArray<func
| object
| bool>
| 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'
| 'rounded'
| 'text'
| string
'text'
The type of content that will be rendered.
widthnumber
| 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 regraClasse globalDescrição
root.MuiSkeleton-rootEstilos aplicados ao elemento raiz.
text.MuiSkeleton-textEstilos aplicados para o elemento raiz se variant="text".
rectangular.MuiSkeleton-rectangularEstilos aplicados para o elemento raiz se variant="rectangular".
rounded.MuiSkeleton-roundedStyles applied to the root element if variant="rounded".
circular.MuiSkeleton-circularEstilos aplicados para o elemento raiz se variant="circular".
pulse.MuiSkeleton-pulseEstilos aplicados para o elemento raiz se animation="pulse".
wave.MuiSkeleton-waveEstilos aplicados para o elemento raiz se animation="wave".
withChildren.MuiSkeleton-withChildrenStyles applied when the component is passed children.
fitContent.MuiSkeleton-fitContentStyles applied when the component is passed children and no width.
heightAuto.MuiSkeleton-heightAutoStyles 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:

Demonstrações