Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – MUI – join Avatars with a dotted line

I have a Stack of Avatars, with text:

<Stack>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#c00500' }} variant="square">C</Avatar>Today</span>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#05C000' }} variant="square">V</Avatar>Yesterday</span>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#c00500' }} variant="square">C</Avatar>Yesterday</span>

</Stack>

I’d like to have a dotted line joining the boxes like this:

Stack with line

How can I achieve this effect?

Tags:

2

Answers


  1. 0

    I think you can’t really do this with MUI, maybe create a div inside the div containing everything, and make it be the dashed line, make position absolute and place it in the way you need, but make sure the container div has position relative.

    Login or Signup to reply.
  2. 0

    The best way of achieving a similar result is by using the MUI Stepper component. See https://mui.com/material-ui/react-stepper/. The two modifications you’d need to make are:

    1. Changing the stepper orientation by using orientation="vertical"
    2. Using a custom connector element for having a dashed connector instead of a solid one (See https://mui.com/material-ui/api/stepper/#stepper-prop-connector)

    The approach to implement the custom component involves modifying the CSS of the pre-existing <StepConnector /> element. A sample of the implementation is shown below (I also added the code to a sandbox for a better preview. See https://codesandbox.io/p/sandbox/verticaldashedmuistepper-5rnyr5. ):

    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 { StepConnector, Typography } from "@mui/material";

const steps = [
  "Select campaign settings",
  "Create an ad group",
  "Create an ad",
];

export default function DashedStepper() {
  const [activeStep, setActiveStep] = React.useState(0);

  return (
    <Box sx={{ width: "100%" }}>
      <Stepper
        connector={
          <StepConnector
            sx={{
              "& .MuiStepConnector-line": {
                borderLeftStyle: "dashed",
                borderLeftWidth: "2.5px",
                height: "40px",
              },
            }}
          />
        }
        orientation="vertical"
        activeStep={activeStep}
      >
        {steps.map((label, index) => {
          return (
            <Step key={label}>
              <StepLabel>
                <Typography variant="h6">{label}</Typography>
                <Typography>{`Actions in Step ${index + 1}`}</Typography>
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>
    </Box>
  );
}

    Upvote and accept the answer if it worked! Thanks 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search