Question

我在React项目中使用material-ui，现在我想展示一个步进器。但我不希望按钮分步前进和后退。我希望所有步骤都可以一起进行。

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>
    );
  }
}

我想要的是一起查看所有步骤的内容，而没有用于前进和后退的任何按钮。但我只能看到第一步的内容，因为“步进器”的activestep属性的默认值为0。

Answer 1

在步骤组件中添加active = {true}可以解决此问题。

Answer 2

在步骤中添加expand = {true}解决了此问题。

如何在Material-UI中一起激活所有步骤？

2 个答案: