Question

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>

我愿有一条 do子加入这样的箱子:

我如何能够做到这一点?

Answer 1

我认为,你可以真正与钻石部合作,也许会在含有所有东西的圆环内制造一iv,使之成为一条shed线,绝对立场,并以你需要的方式将其定位,但可以确保集装箱四具有相对的地位。

Answer 2

取得类似成果的最佳途径是利用“协调倡议”步骤部分。见。你们需要做的两种修改是:

Changing the stepper orientation by using orientation="vertical"

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)

执行习惯组成部分的方法包括修改原有的<代码>和t;StepConnector />要素。执行工作的样本如下(我还将守则添加到一个沙箱中,以便进行更好的审查)。见:

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

发出并接受答案,如果它发挥作用的话! 感谢:-

友情链接