Package Exports

react-native-mui-stepper
react-native-mui-stepper/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-mui-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-mui-stepper

Stepper-компоненты для React Native в стиле Material-UI (MUI)

Установка

npm install react-native-mui-stepper
# или
bun add react-native-mui-stepper

Использование

import { Stepper, Step, StepLabel, StepConnector } from 'react-native-mui-stepper';

<Stepper activeStep={1}>
  <Step>
    <StepLabel>Шаг 1</StepLabel>
  </Step>
  <Step>
    <StepLabel>Шаг 2</StepLabel>
  </Step>
  <Step>
    <StepLabel>Шаг 3</StepLabel>
  </Step>
</Stepper>

Кастомизация коннектора

<Stepper
  activeStep={1}
  connector={({ completedPrev, completedNext }) => (
    <StepConnector
      style={{
        backgroundColor: completedPrev && completedNext ? '#1976d2' : '#ccc',
        height: 4,
        width: 40,
        marginLeft: -6,
        marginRight: -6,
      }}
    />
  )}
>
  {/* ... */}
</Stepper>

Автоматическое и ручное управление состояниями

По умолчанию completed/isActive/disabled вычисляются автоматически на основе activeStep.
Можно вручную задать состояние для любого шага через пропсы:

<Step completed>
  <StepLabel>Готово!</StepLabel>
</Step>

API

`<Stepper>`

activeStep: number — индекс активного шага
orientation?: 'horizontal' | 'vertical' — направление
connector?: ReactElement | (props) => ReactElement — кастомный коннектор
children: ReactNode — шаги

`<Step>`

completed?: boolean — вручную completed
disabled?: boolean — вручную disabled
isActive?: boolean — вручную активный
children: ReactNode — содержимое шага

`<StepLabel>`

children: ReactNode — подпись или иконка

`<StepConnector>`

style?: ViewStyle — стили линии

MIT License