Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to implement horizontal timeline using Material UI in React?

I'm trying to implement a horizontal timeline using Material UI in React. In their documentation I could find only vertical timeline demos and I couldn't find any prop that can directly change the alignment. Is there a way to solve this?

I would want to implement something like the below image, but horizontal.

enter image description here

like image 853
Athira Sreekumar Avatar asked Jul 30 '20 14:07

Athira Sreekumar


People also ask

How do you create a horizontal timeline in React?

Step 1: Create a React application using the following command. Step 2: After creating your project folder i.e. foldername, move to it using the following command. Step 3: After creating the ReactJS application, Install the react-horizontal-timeline using the following command.

Is material UI GOOD FOR React?

First up, Material UI (MUI) is an excellent React UI framework with multiple pre-built components and templates. For example, it includes pre-built sliders, drop-down menus, and navigational tools, so you don't need to waste time developing your own.

How does material UI Integrate With React?

First, create a new react application, react-materialui-app using Create React App or Rollup bundler by following instruction in Creating a React application chapter. Next, open the application in your favorite editor. Next, create src folder under the root directory of the application.


2 Answers

You can override the timeline styles and do something like this:

const useStyles = makeStyles({
  timeline: {
    transform: "rotate(90deg)"
  },
  timelineContentContainer: {
    textAlign: "left"
  },
  timelineContent: {
    display: "inline-block",
    transform: "rotate(-90deg)",
    textAlign: "center",
    minWidth: 50
  },
  timelineIcon: {
    transform: "rotate(-90deg)"
  }
});

function App() {
  const classes = useStyles();

  return (
    <Timeline className={classes.timeline} align="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <CheckCircleOutlineIcon
            color="primary"
            className={classes.timelineIcon}
          />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Eat</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <PauseCircleFilledIcon
            color="primary"
            className={classes.timelineIcon}
          />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Code</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <CachedIcon color="primary" className={classes.timelineIcon} />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Sleep</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <CachedIcon color="primary" className={classes.timelineIcon} />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Repeat</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <ErrorIcon color="primary" className={classes.timelineIcon} />
        </TimelineSeparator>
        <TimelineContent className={classes.timelineContentContainer}>
          <Paper className={classes.timelineContent}>
            <Typography>Sleep</Typography>
          </Paper>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

If the labels aren't on the same elevation, adjust minWidth.


The result looks like this:

timeline

One thing that will feel weird using this approach is that the visually left most element is the last element in the timeline, because of the rotation.

like image 200
Bas van der Linden Avatar answered Nov 09 '22 06:11

Bas van der Linden


If you like, you can use stepper as an alternative solution

Material UI stepper

like image 34
user3184687 Avatar answered Nov 09 '22 04:11

user3184687