[MobileStepper] Way to access a custom slide number by clicking on one of the dots

[bperel]

I would like to create a stepper similar to the "Mobile with carousel effect" one on the Steppers demo page, but where clicking on each of the dots would actually make the slide update accordingly.

I didn't find an option to do that in the API, did I miss something or do I need to duplicate the MobileStepper and add this behavior manually?

Thanks in advance!

[MarcoMedrano]

Yeah, i am looking for making clickable the dots as well. This feature is really needed when we have lot of steps/pages... which might be very common for a carousel.. right now with only 2 buttons the unique way to navigate is by clicking multiple times one of the buttons :S

[bperel]

Cool. I rewrote MobileStepper locally to allow that so I'll create a PR in the next days.

[MarcoMedrano]

Awesome!

[Felix-N]

did this get merged?

[AminPainter]

Here is a custom mobile stepper that allows you to make the dots clickable

import React from 'react';
import { Stack, styled } from '@mui/material';

const MobileStepper = ({ activeStep, steps, onStepClick }) => (
  <StepsContainer>
    {Array.from(Array(steps).keys()).map(step => (
      <Step key={step} onClick={() => onStepClick(step)} active={activeStep === step} />
    ))}
  </StepsContainer>
);

export default MobileStepper;

const StepsContainer = styled(Stack)(({ theme }) => ({
  backgroundColor: 'transparent',
  justifyContent: 'center',
  marginTop: theme.spacing(3),
  flexDirection: 'row',
  gap: theme.spacing(0.5),
  padding: theme.spacing(1),
}));

const Step = styled('button')(({ theme, active }) => ({
  height: '8px',
  width: '8px',
  borderRadius: '50%',
  backgroundColor: active ? theme.palette.primary.main : theme.palette.grey[400],
  cursor: 'pointer',
}));

And this is how to use it

<MobileStepper steps={maxSteps} activeStep={activeStep} onStepClick={currentStep => setActiveStep(currentStep)} />

[agoldlake]

Here is a custom mobile stepper that allows you to make the dots clickable

const Step = styled('button')(({ theme, active }) => ({
  height: '8px',
  width: '8px',
  borderRadius: '50%',
  backgroundColor: active ? theme.palette.primary.main : theme.palette.grey[400],
  cursor: 'pointer',
}));

In case anyone is looking to make this with typescript and want to keep the native dot style:

interface IStepStyled {
    active: boolean;
}
const StyledStep = styled(Step)<IStepStyled>
  (({ theme, active }:any) => ({
    height: '8px',
    width: '8px',
    borderRadius: '50%',
    backgroundColor: active ? theme.palette.primary.main : theme.palette.grey[400],
    cursor: 'pointer',
  }));

const MobileStepper = ({ activeStep, steps, onStepClick }:any ) => (
  <StepsContainer>
    {Array.from(Array(steps).keys()).map(step => (
      <StyledStep key={step} onClick={() => onStepClick(step)} active={activeStep === step} />
    ))}
  </StepsContainer>
);