MUIのTimelineコンポーネントで縦方向のタイムラインUIを作ってみる

はじめに

タイムラインUIの作成方法を調べていたところ、MUIで Timeline コンポーネントがあったので。こちらを使用し縦方向のタイムラインUIを実装してみました。

環境

• react: 18.3.1
• vite: 5.4.8

ゴール

次のようなタイムラインUIを作成する

インストール

npm install @mui/material @mui/lab @emotion/react @emotion/styled

タイムラインの作成

タイムラインUIを作成します。詳細はコメントアウトの通りです。

App.jsx

import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
import { Typography, Paper } from '@mui/material';

// サンプルデータ
const timelineItems = [
  {
    year: '2024',
    title: 'サンプル１',
    description: 'テキスト テキスト テキスト',
  },
  {
    year: '2023',
    title: 'サンプル2',
    description: 'テキスト テキスト テキスト',
  },
  {
    year: '2022',
    title: 'サンプル3',
    description: 'テキスト テキスト テキスト',
  },
  {
    year: '2021',
    title: 'サンプル4',
    description: 'テキスト テキスト テキスト',
  },
];

export default function App() {
  return (
    <div style={{width:'50%', margin: '0 auto'}}>
        <Timeline position="alternate">
          {timelineItems.map((item, index) => (
            <TimelineItem key={item.year}>
              {/* 年を表示 */}
              <TimelineOppositeContent>
                <Typography variant="h6" component="span">
                  {item.year}
                </Typography>
              </TimelineOppositeContent>
              {/* 中央の点と線 */}
              <TimelineSeparator>
                <TimelineDot color="primary" />
                {index !== timelineItems.length - 1 && <TimelineConnector />}
              </TimelineSeparator>
              {/* カード風のUI */}
              <TimelineContent>
                <Paper elevation={3} sx={{ p: 2 }}>
                  {/* タイトル */}
                  <Typography variant="h6" component="span">
                    {item.title}
                  </Typography>
                  {/* 説明文 */}
                  <Typography>{item.description}</Typography>
                </Paper>
              </TimelineContent>
            </TimelineItem>
          ))}
        </Timeline>
    </div>
  );
}

動作確認

サーバを起動してUIを確認します。

npm run dev

カード風のUIをタイムラインが作成されてることを確認できました。

参考