Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to activate all steps together in material-ui?

I'm using material-ui in my React project and now I want to show a stepper. but I dont want buttons for going backward and forward in steps. I want all steps to be active together.

import React from 'react';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Typography from '@material-ui/core/Typography';

function getSteps() {
  return ['Title 1', 'Title 2', 'Title 3'];
}

function getStepContent(step) {
  switch (step) {
    case 0:
      return `For each ad campaign that you create, you can control how much
              you're willing to spend on clicks and conversions, which networks
              and geographical locations you want your ads to show on, and more.`;
    case 1:
      return 'An ad group contains one or more ads which target a shared set of keywords.';
    case 2:
      return `Try out different ad text to see what brings in the most customers,
              and learn how to enhance your ads using features like ad extensions.
              If you run into any problems with your ads, find out how to tell if
              they're running and how to resolve approval issues.`;
    default:
      return 'Unknown step';
  }
}

class VerticalLinearStepper extends React.Component {

  render() {
    const steps = getSteps();

    return (
      <div className={classes.root}>
        <Stepper orientation="vertical">
          {steps.map((label, index) => {
            return (
              <Step key={label} active={true}>
                <StepLabel>{label}</StepLabel>
                <StepContent>
                  <Typography>{getStepContent(index)}</Typography>
                </StepContent>
              </Step>
            );
          })}
        </Stepper>
      </div>
    );
  }
}

what i want is to see all the steps contents together without any Button for going backward and forward. but I can only see the content of the first step because the default value for activestep prop of 'Stepper' is 0.

like image 908
Hamid Avatar asked Sep 26 '18 07:09

Hamid


2 Answers

adding active = {true} to the Step component solved this issue.

like image 173
Hamid Avatar answered Sep 28 '22 10:09

Hamid


adding expanded={true} to the Step solved this issue.

like image 28
Emmanuel P. Avatar answered Sep 28 '22 08:09

Emmanuel P.