MobileStepper API

Documentação da API para o componente React MobileStepper . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import MobileStepper from '@mui/material/MobileStepper';
// ou
import { MobileStepper } 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 MuiMobileStepper can be used when providing default props or style overrides in the theme.

Propriedades

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

Nome	Tipo	Padrão	Descrição
steps^*	integer		The total steps.
activeStep	integer	0	Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'.
backButton	node		A back button element. For instance, it can be a `Button` or an `IconButton`.
classes	object		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
LinearProgressProps	object		Props applied to the `LinearProgress` element.
nextButton	node		A next button element. For instance, it can be a `Button` or an `IconButton`.
position	'bottom' \| 'static' \| 'top'	'bottom'	Set the positioning type.
sx	Array<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	'dots' \| 'progress' \| 'text'	'dots'	A variante a usar.

O ref é encaminhado para o elemento raiz.

Herança

While not explicitly documented above, the props of the Paper component are also available on MobileStepper. You can take advantage of this to target nested components.

CSS

Nome da regra	Classe global	Descrição
root	.MuiMobileStepper-root	Estilos aplicados ao elemento raiz.
positionBottom	.MuiMobileStepper-positionBottom	Estilos aplicados para o elemento raiz se `position="bottom"`.
positionTop	.MuiMobileStepper-positionTop	Estilos aplicados para o elemento raiz se `position="top"`.
positionStatic	.MuiMobileStepper-positionStatic	Estilos aplicados para o elemento raiz se `position="static"`.
dots	.MuiMobileStepper-dots	Estilos aplicados para the dots container se `variant="dots"`.
dot	.MuiMobileStepper-dot	Estilos aplicados para each dot se `variant="dots"`.
dotActive	.MuiMobileStepper-dotActive	Estilos aplicados para a dot se `variant="dots"` and this is the active step.
progress	.MuiMobileStepper-progress	Estilos aplicados para the Linear Progress component se `variant="progress"`.

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.

Demonstrações

Stepper