Material UI - Stepper top and bottom labels with line

Marc Richard

I try to make a stepper with Material UI (V5). Here is my code:

import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import Typography from '@mui/material/Typography';
import StepLabel from '@mui/material/StepLabel';

const steps = [
  'Step 1 - Top',
  'Step 2 - Top',
  'Ste^3 - Top',
];

export default function HorizontalLabelPositionBelowStepper() {
  return (
    <Box sx={{ width: '100%' }}>
      <Stepper activeStep={1} alternativeLabel
      >
        {steps.map((label) => (
          <Step key={label}>
            <Typography>Top text</Typography>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </Box>
  );
}

That gives this result:

enter image description here

How to properly position the line and the 'top text' labels?

What about aligning the icons with the line such as: image with icon and line aligned

Do I need to create a separated Grid or Box before the Stepper to create the top labels? Thank you.

thank you for your suggestions.

Marc

Akis

Bellow I have the code you need including two solutions.

Solution 1 is faster and it will work better when the label-text of the steps have similar width between them. If not you have to specify the .MuiStepConnector-root left and right properties for each child if you want to have a better looking result.

Solution 2 includes a little more code and but will work no matter the width of each label-text. As it used a background color make sure to change it to match your background.

Here is the codesandbox to play with it and see both working solutions. Please make sure to comment or uncomment the code depending the solution you want to try.

Code:

import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import { Typography } from "@mui/material";

const steps = ["Step 1 - Top", "Step 2 - Top", "Ste^3 - Top"];

// Solution 1
const StepperSx = {
  "& .MuiStepConnector-root": {
    left: "calc(-50% + 40px)",
    right: "calc(50% + 40px)"
  },
  "& .MuiStepConnector-line": {
    marginTop: "22px"
  }
};

// Solution 2
// const StepperSx2 = {
//   textAlign: "center",
//   "& .MuiStepConnector-root": {
//     zIndex: "1",
//     position: "relative"
//   }
// };

// Solution 2
// const TypographySx = {
//   zIndex: "2",
//   background: "#FFF",
//   display: "inline",
//   position: "relative",
//   padding: "0 15px"
// };

export default function HorizontalLabelPositionBelowStepper() {
  return (
    <Box sx={{ width: "100%" }}>
      <Stepper
        activeStep={1}
        alternativeLabel
        sx={StepperSx} // For solution 1
        // sx={StepperSx2} // For solution 2
      >
        {steps.map((label) => (
          <Step key={label}>
            <Typography
              align="center"
              // sx={TypographySx} // For solution 2
            >
              Top text
            </Typography>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </Box>
  );
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Material-ui stepper connect dots with line

Material UI - Button inside stepper step

How to customize colors in Material UI Stepper Step?

React.js, Material Ui Stepper direction

React Material UI - Change Stepper text color

How to customize Angular Material stepper component showing label at the top?

Bottom Navigation Material UI Override

Draw triangle at bottom or top of line

matplotlib matshow xtick labels on top and bottom

How to add top and bottom labels for dot graph?

How to align this select list of material-ui to bottom line of input block?

Disable the collapse action from a Material-UI Stepper component

Passing data across Material-UI Stepper using React Hooks

React, material-ui and stepper: how to display html in each steps

ReactJS: How to change font size and marginTop of stepper label in Material UI?

Keep the pervious step open Vertical Stepper Material-UI

How to add href to a button in react material-ui stepper

Show correctly Stepper with Material UI and React.js

How to do an Stepper with progress bars Material-ui

Material UI: How to change font size of label in React Material Ui Stepper?

Align Card Buttons on bottom Material UI

How to add button to material ui table at the bottom?

Material UI: Display the dialog at the bottom left of the page

Material UI Footer not going to the bottom of page

Round the top and bottom of dashed line drawn with UIBezierPath

UIButton Top and Bottom Border additional line

Top and bottom line on errorbar with python and seaborn

ChartJS Line chart cut off at the top and bottom

Keep stdin line at top or bottom of terminal screen

TOP Ranking

HotTag

Archive