Материал-степпер соединяет точки с линией - PullRequest
Новая
       26

Материал-степпер соединяет точки с линией

0 голосов
/ 14 октября 2019

Я занимаюсь реализацией степлеров материала-пользовательского интерфейса, а именно «степпера с маленькой точкой», и сейчас я сталкиваюсь с проблемой соединения точек с линией. Я попытался установить абсолютное положение StepConnector, но он не ведет себя так хорошо при смене экранов, кто-нибудь знает решение этой проблемы?

песочница: https://op1l9.csb.app/

Ссылка на рассматриваемый степпер:

https://material -ui.com / components / steppers /

Большая часть этого кода уже есть в предоставленной мной ссылке 

import styles from "./styles";
import {
    Paper,
    Grid,
    Typography,
    Stepper,
    Step,
    StepLabel,
    StepContent,
    StepConnector,
    makeStyles,
    withStyles,
} from "@material-ui/core";
import { MoreHoriz } from '@material-ui/icons'
import PropTypes from "prop-types";
import React from "react";

const useQontoStepIconStyles = makeStyles({
    root: {
        color: '#2e5bff',
        display: 'flex',
        height: 28,
        marginLeft: 8,
        alignItems: 'center',
    },
    active: {
        color: '#2e5bff',
    },
    circle: {
        zIndex: 2,
        width: 8,
        height: 8,
        borderRadius: '50%',
        backgroundColor: 'currentColor',
    },
    completed: {
        color: '#2e5bff',
        zIndex: 1,
        fontSize: 18,
    },
  });

function QontoStepIcon(props) {
    const classes = useQontoStepIconStyles();

    return (
      <div
        className={classes.root}
      >
        <div style={{color: props.color}} className={classes.circle} />
      </div>
    );
  }

  QontoStepIcon.propTypes = {
    active: PropTypes.bool,
    completed: PropTypes.bool,
  };

const QontoConnector = withStyles({
    alternativeLabel: {
      top: 10,
      left: 'calc(-50% + 16px)',
      right: 'calc(50% + 16px)',
    },
    lineVertical: {
        height: 20
    },
    active: {
      '& $line': {
        borderColor: '#2e5bff',
      },
    },
    completed: {
      '& $line': {
        borderColor: '#2e5bff',
      },
    },
    line: {
      borderColor: '#eaeaf0',
      borderTopWidth: 3,
      borderRadius: 1,
    },
  })(StepConnector);

        <Stepper orientation="vertical" connector={<QontoConnector />}>
            {steps.map((step, index) => (
                <Step key={step.label}>
                    <StepLabel
                        optional={<Typography className={classes.description}>{step.description}</Typography>}
                        StepIconComponent={() => <QontoStepIcon color={step.color}/>}
                    >
                        <Typography className={classes.title}>
                            {step.title}
                        </Typography>
                    </StepLabel>
                </Step>
            ))}
        </Stepper>

1 Ответ

0 голосов
/ 16 октября 2019

Я решил это с помощью псевдоэлементов, играющих с :: after и :: before. Это не отзывчиво, но работает для моих нужд.

...