我正在尝试在React中使用Material UI实施水平时间线。在他们的文档中,我只能找到垂直时间轴演示,找不到任何可以直接更改对齐方式的道具。有办法解决这个问题吗?
我想实现下图所示的东西,但是要水平。
答案 0 :(得分:2)
您可以覆盖时间轴样式并执行以下操作:
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>
);
}
如果标签不在同一高度,请调整minWidth
。
结果如下:
使用此方法会感到奇怪的是,由于旋转,视觉上最左边的元素是时间轴中的最后一个元素。
答案 1 :(得分:0)
如果您愿意,可以使用步进器作为替代解决方案