Timeline

Timeline

이벤트 목록을 시간 순서로 표시하는 컴포넌트예요. 일련의 활동이나 단계를 시간 흐름에 따라 보여줄 때 사용해요.

출처: 문서

본문

사용법 (Usage)

Timeline 컴포넌트는 Timeline.Item 하위 컴포넌트로 각 이벤트를 정의해요.

import { Timeline, Text } from '@mantine/core';
import { GitBranchIcon, GitPullRequestIcon, GitCommitIcon, ChatCircleDotsIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Timeline active={1} bulletSize={24} lineWidth={2}>
      <Timeline.Item bullet={<GitBranchIcon size={12} />} title="New branch">
        <Text c="dimmed" size="sm">You've created new branch fix-notifications from master</Text>
        <Text size="xs" mt={4}>2 hours ago</Text>
      </Timeline.Item>

      <Timeline.Item bullet={<GitCommitIcon size={12} />} title="Commits">
        <Text c="dimmed" size="sm">You've pushed 23 commits to fix-notifications branch</Text>
        <Text size="xs" mt={4}>52 minutes ago</Text>
      </Timeline.Item>

      <Timeline.Item title="Pull request" lineVariant="dashed" bullet={<GitPullRequestIcon size={12} />}>
        <Text c="dimmed" size="sm">You've submitted a pull request Fix incorrect notification message (#187)</Text>
        <Text size="xs" mt={4}>34 minutes ago</Text>
      </Timeline.Item>

      <Timeline.Item title="Code review" bullet={<ChatCircleDotsIcon size={12} />}>
        <Text c="dimmed" size="sm">Robert Gluesticker left a code review on your pull request</Text>
        <Text size="xs" mt={4}>12 minutes ago</Text>
      </Timeline.Item>
    </Timeline>
  );
}

선과 불릿 props (Line and bullet props)

타임라인 모양을 다음 props로 제어할 수 있어요.

• active – 현재 활성 요소의 인덱스. 이 인덱스 이전의 모든 요소가 color로 강조돼요
• color – 활성 항목을 강조하는 데 사용할 테마 색상, 기본값은 theme.primaryColor
• lineWidth – 선 너비와 불릿 테두리를 제어해요
• bulletSize – 불릿의 너비, 높이, 테두리 반경
• align – 콘텐츠에 대한 선과 불릿의 위치를 정의하고 text-align도 설정해요

import { Timeline } from '@mantine/core';

function Demo() {
  return (
    <Timeline color="teal" active={1} lineWidth={2} bulletSize={20}>
      {/* items */}
    </Timeline>
  );
}

반대쪽 콘텐츠 (Opposite content)

Timeline.Item에서 opposite prop을 사용해 타임라인의 반대쪽에 콘텐츠를 렌더링할 수 있어요. 어떤 Timeline.Item이라도 opposite prop이 있으면, 타임라인은 선 양쪽에 콘텐츠가 있는 가운데 정렬 레이아웃으로 전환돼요.

import { Timeline, Text } from '@mantine/core';
import { GitBranchIcon, GitCommitIcon, GitPullRequestIcon, ChatCircleDotsIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Timeline active={1} bulletSize={24} lineWidth={2}>
      <Timeline.Item
        bullet={<GitBranchIcon size={12} />}
        title="New branch"
        opposite={<Text size="xs" c="dimmed">2 hours ago</Text>}
      >
        <Text c="dimmed" size="sm">You've created new branch fix-notifications from master</Text>
      </Timeline.Item>
      {/* ...더 많은 Timeline.Item */}
    </Timeline>
  );
}

항목 번갈아 배치 (Alternate items)

개별 Timeline.Item 컴포넌트에 alternate prop을 설정하면 콘텐츠와 opposite의 위치를 번갈아 바꿀 수 있어요.

import { Timeline, Text } from '@mantine/core';
import { GitBranchIcon, GitCommitIcon, GitPullRequestIcon, ChatCircleDotsIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Timeline active={1} bulletSize={24} lineWidth={2}>
      <Timeline.Item
        bullet={<GitBranchIcon size={12} />}
        title="New branch"
        opposite={<Text size="xs" c="dimmed">2 hours ago</Text>}
      >
        <Text c="dimmed" size="sm">You've created new branch fix-notifications from master</Text>
      </Timeline.Item>

      <Timeline.Item
        bullet={<GitCommitIcon size={12} />}
        title="Commits"
        opposite={<Text size="xs" c="dimmed">52 minutes ago</Text>}
        alternate
      >
        <Text c="dimmed" size="sm">You've pushed 23 commits to fix-notifications branch</Text>
      </Timeline.Item>
      {/* ...더 많은 Timeline.Item */}
    </Timeline>
  );
}

React 노드로 사용하는 불릿 (Bullet as React node)

불릿으로 어떤 React 노드든 사용할 수 있어요. 기본 불릿, 아바타 이미지, 아이콘, ThemeIcon 컴포넌트 등을 사용할 수 있어요.

import { ThemeIcon, Text, Avatar, Timeline } from '@mantine/core';
import { SunIcon, VideoCameraIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Timeline active={0} bulletSize={24} lineWidth={2}>
      <Timeline.Item title="Default bullet">
        <Text c="dimmed" size="sm">Default bullet without anything</Text>
      </Timeline.Item>

      <Timeline.Item
        title="Avatar"
        bullet={
          <Avatar src="avatar.png" size={24} radius="xl" />
        }
      >
        <Text c="dimmed" size="sm">Timeline bullet as avatar image</Text>
      </Timeline.Item>

      <Timeline.Item
        title="Icon"
        bullet={<SunIcon size={12} />}
      >
        <Text c="dimmed" size="sm">Timeline bullet as icon</Text>
      </Timeline.Item>

      <Timeline.Item
        title="ThemeIcon"
        bullet={
          <ThemeIcon size={24} radius="xl" color="violet" variant="light">
            <VideoCameraIcon size={12} />
          </ThemeIcon>
        }
      >
        <Text c="dimmed" size="sm">Timeline bullet as ThemeIcon component</Text>
      </Timeline.Item>
    </Timeline>
  );
}

Timeline.Item 래핑 (Wrap Timeline.Item)

Timeline 컴포넌트는 Timeline.Item의 순서에 의존해요. Timeline.Item을 래핑하는 것은 지원되지 않아요. 대신 다른 접근 방식을 사용해야 해요.

import { Timeline } from '@mantine/core';

// 이 방식은 동작하지 않아요, step 자식이 렌더링되지 않아요
function WillNotWork() {
  return <div>It will not work</div>;
}

// 자식용으로 별도의 컴포넌트를 만들어요
function WillWork() {
  return <div>This will work as expected!</div>;
}

function Demo() {
  return (
    <Timeline active={0}>
      <Timeline.Item title="First item">
        <WillWork />
      </Timeline.Item>

      <Timeline.Item title="Third item" />
    </Timeline>
  );
}

더 알아보기 (Learn more)

• ThemeIcon
• Blockquote