타임라인

타임라인 (Timeline)

타임라인은 일련의 이벤트를 시간 순서대로 표시하는 컴포넌트예요. 이벤트 목록을 시각적으로 자리 잡아 보여 줄 수 있답니다.

:::info 이 컴포넌트는 Material Design 가이드라인에 문서화되어 있지 않지만, Material UI에서는 사용할 수 있어요. :::

출처: 문서

본문

기본 타임라인 (Basic timeline)

이벤트 목록을 보여주는 기본 타임라인이에요.

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';

export default function BasicTimeline() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

왼쪽 배치 타임라인 (Left-positioned timeline)

타임라인의 주요 콘텐츠를 시간 축(time axis)을 기준으로 왼쪽에 배치할 수 있어요.

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';

export default function LeftPositionedTimeline() {
  return (
    <Timeline position="left">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Repeat</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

교차 타임라인 (Alternating timeline)

타임라인은 이벤트들을 교차하는 양쪽에 표시할 수 있어요.

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';

export default function AlternateTimeline() {
  return (
    <Timeline position="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Repeat</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

역순 교차 타임라인 (Reverse Alternating timeline)

타임라인은 이벤트들을 역순으로 교차하는 양쪽에 표시할 수 있어요.

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';

export default function AlternateReverseTimeline() {
  return (
    <Timeline position="alternate-reverse">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Repeat</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

색상 (Color)

TimelineDot은 테마 팔레트의 여러 색상으로 표현될 수 있어요.

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';

export default function ColorsTimeline() {
  return (
    <Timeline position="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color="secondary" />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Secondary</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color="success" />
        </TimelineSeparator>
        <TimelineContent>Success</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

아웃라인 (Outlined)

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';

export default function OutlinedTimeline() {
  return (
    <Timeline position="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot variant="outlined" />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot variant="outlined" color="primary" />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot variant="outlined" color="secondary" />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot variant="outlined" />
        </TimelineSeparator>
        <TimelineContent>Repeat</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

반대쪽 콘텐츠 (Opposite content)

타임라인은 반대쪽에도 콘텐츠를 표시할 수 있어요.

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';

export default function OppositeContentTimeline() {
  return (
    <Timeline position="alternate">
      <TimelineItem>
        <TimelineOppositeContent
          sx={{
            color: 'text.secondary',
          }}
        >
          09:30 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineOppositeContent
          sx={{
            color: 'text.secondary',
          }}
        >
          10:00 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineOppositeContent
          sx={{
            color: 'text.secondary',
          }}
        >
          12:00 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineOppositeContent
          sx={{
            color: 'text.secondary',
          }}
        >
          9:00 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Repeat</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

커스터마이징 (Customization)

컴포넌트를 커스터마이징하는 예시예요. 자세한 내용은 오버라이드 문서 페이지에서 확인할 수 있어요.

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 TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
import TimelineDot from '@mui/lab/TimelineDot';
import FastfoodIcon from '@mui/icons-material/Fastfood';
import LaptopMacIcon from '@mui/icons-material/LaptopMac';
import HotelIcon from '@mui/icons-material/Hotel';
import RepeatIcon from '@mui/icons-material/Repeat';
import Typography from '@mui/material/Typography';

export default function CustomizedTimeline() {
  return (
    <Timeline position="alternate">
      <TimelineItem>
        <TimelineOppositeContent
          align="right"
          variant="body2"
          sx={{
            color: 'text.secondary',
            m: 'auto 0',
          }}
        >
          9:30 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineConnector />
          <TimelineDot>
            <FastfoodIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent sx={{ py: '12px', px: 2 }}>
          <Typography variant="h6" component="span">
            Eat
          </Typography>
          <Typography>Because you need strength</Typography>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineOppositeContent
          variant="body2"
          sx={{
            color: 'text.secondary',
            m: 'auto 0',
          }}
        >
          10:00 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineConnector />
          <TimelineDot color="primary">
            <LaptopMacIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent sx={{ py: '12px', px: 2 }}>
          <Typography variant="h6" component="span">
            Code
          </Typography>
          <Typography>Because it&apos;s awesome!</Typography>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineConnector />
          <TimelineDot color="primary" variant="outlined">
            <HotelIcon />
          </TimelineDot>
          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
        </TimelineSeparator>
        <TimelineContent sx={{ py: '12px', px: 2 }}>
          <Typography variant="h6" component="span">
            Sleep
          </Typography>
          <Typography>Because you need rest</Typography>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
          <TimelineDot color="secondary">
            <RepeatIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent sx={{ py: '12px', px: 2 }}>
          <Typography variant="h6" component="span">
            Repeat
          </Typography>
          <Typography>Because this is the life you love!</Typography>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

정렬 (Alignment)

Timeline을 컨테이너 안에 배치하는 방법은 여러 가지가 있어요.

스타일을 오버라이드해서 처리할 수 있습니다.

Timeline은 기본적으로 컨테이너 안에서 가운데 정렬됩니다.

아래 데모들은 Timeline의 왼쪽과 오른쪽 상대적 너비를 조정하는 방법을 보여줘요:

왼쪽 정렬 (Left-aligned)

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, {
  timelineOppositeContentClasses,
} from '@mui/lab/TimelineOppositeContent';

export default function LeftAlignedTimeline() {
  return (
    <Timeline
      sx={{
        [`& .${timelineOppositeContentClasses.root}`]: {
          flex: 0.2,
        },
      }}
    >
      <TimelineItem>
        <TimelineOppositeContent color="textSecondary">
          09:30 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineOppositeContent color="textSecondary">
          10:00 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

오른쪽 정렬 (Right-aligned)

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, { timelineContentClasses } from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';

export default function RightAlignedTimeline() {
  return (
    <Timeline
      sx={{
        [`& .${timelineContentClasses.root}`]: {
          flex: 0.2,
        },
      }}
    >
      <TimelineItem>
        <TimelineOppositeContent color="textSecondary">
          09:30 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineOppositeContent color="textSecondary">
          10:00 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

반대쪽 콘텐츠가 없는 왼쪽 정렬 (Left-aligned with no opposite content)

import Timeline from '@mui/lab/Timeline';
import TimelineItem, { timelineItemClasses } 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';

export default function NoOppositeContent() {
  return (
    <Timeline
      sx={{
        [`& .${timelineItemClasses.root}:before`]: {
          flex: 0,
          padding: 0,
        },
      }}
    >
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

Timeline API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:

• Timeline

Import

import Timeline from '@mui/lab/Timeline';
// or
import { Timeline } from '@mui/lab';

Props

이름 (Name)	타입 (Type)	기본값 (Default)	필수 (Required)	설명 (Description)
children	node	-	No
classes	object	-	No	Override or extend the styles applied to the component.
className	string	-	No
position	'alternate-reverse' | 'alternate' | 'left' | 'right'	'right'	No
sx	Array<func | object | bool> | func | object	-	No	The system prop that allows defining system overrides as well as additional CSS styles.

참고 (Note): ref는 루트 요소(HTMLUListElement)로 전달됩니다.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달됩니다.

테마 기본 props (Theme default props)

MuiTimeline를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

전역 클래스 (Global class)	규칙 이름 (Rule name)	설명 (Description)
-	positionAlternate	Styles applied to the root element if position="alternate".
-	positionAlternateReverse	Styles applied to the root element if position="alternate-reverse".
-	positionLeft	Styles applied to the root element if position="left".
-	positionRight	Styles applied to the root element if position="right".
-	root	Styles applied to the root element.

소스 코드 (Source code)

이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.

• /packages/mui-lab/src/Timeline/Timeline.tsx

TimelineConnector API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:

• Timeline

Import

import TimelineConnector from '@mui/lab/TimelineConnector';
// or
import { TimelineConnector } from '@mui/lab';

Props

이름 (Name)	타입 (Type)	기본값 (Default)	필수 (Required)	설명 (Description)
children	node	-	No
classes	object	-	No	Override or extend the styles applied to the component.
sx	Array<func | object | bool> | func | object	-	No	The system prop that allows defining system overrides as well as additional CSS styles.

참고 (Note): ref는 루트 요소(HTMLSpanElement)로 전달됩니다.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달됩니다.

테마 기본 props (Theme default props)

MuiTimelineConnector를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

전역 클래스 (Global class)	규칙 이름 (Rule name)	설명 (Description)
-	root	Styles applied to the root element.

소스 코드 (Source code)

이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.

• /packages/mui-lab/src/TimelineConnector/TimelineConnector.js

TimelineContent API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:

• Timeline

Import

import TimelineContent from '@mui/lab/TimelineContent';
// or
import { TimelineContent } from '@mui/lab';

Props

이름 (Name)	타입 (Type)	기본값 (Default)	필수 (Required)	설명 (Description)
children	node	-	No
classes	object	-	No	Override or extend the styles applied to the component.
sx	Array<func | object | bool> | func | object	-	No	The system prop that allows defining system overrides as well as additional CSS styles.

참고 (Note): ref는 루트 요소(HTMLDivElement)로 전달됩니다.

제공된 다른 모든 props는 루트 요소(Typography)로 전달됩니다.

상속 (Inheritance)

위에 명시적으로 문서화되진 않았지만, Typography 컴포넌트의 props는 TimelineContent에서도 사용할 수 있어요.

테마 기본 props (Theme default props)

MuiTimelineContent를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

전역 클래스 (Global class)	규칙 이름 (Rule name)	설명 (Description)
-	positionAlternate	Styles applied to the root element if position="alternate".
-	positionAlternateReverse	Styles applied to the root element if position="alternate-reverse".
-	positionLeft	Styles applied to the root element if position="left".
-	positionRight	Styles applied to the root element if position="right".
-	root	Styles applied to the root element.

소스 코드 (Source code)

이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.

• /packages/mui-lab/src/TimelineContent/TimelineContent.js

TimelineDot API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:

• Timeline

Import

import TimelineDot from '@mui/lab/TimelineDot';
// or
import { TimelineDot } from '@mui/lab';

Props

이름 (Name)	타입 (Type)	기본값 (Default)	필수 (Required)	설명 (Description)
children	node	-	No
classes	object	-	No	Override or extend the styles applied to the component.
color	'error' | 'grey' | 'info' | 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | string	'grey'	No
sx	Array<func | object | bool> | func | object	-	No	The system prop that allows defining system overrides as well as additional CSS styles.
variant	'filled' | 'outlined' | string	'filled'	No

참고 (Note): ref는 루트 요소(HTMLSpanElement)로 전달됩니다.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달됩니다.

테마 기본 props (Theme default props)

MuiTimelineDot를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

전역 클래스 (Global class)	규칙 이름 (Rule name)	설명 (Description)
-	filled	Styles applied to the root element if variant="filled".
-	filledGrey	Styles applied to the root element if color="grey" and variant="filled".
-	filledPrimary	Styles applied to the root element if color="primary" and variant="filled".
-	filledSecondary	Styles applied to the root element if color="secondary" and variant="filled".
-	outlined	Styles applied to the root element if variant="outlined".
-	outlinedGrey	Styles applied to the root element if color="grey" and variant="outlined".
-	outlinedPrimary	Styles applied to the root element if color="primary" and variant="outlined".
-	outlinedSecondary	Styles applied to the root element if color="secondary" and variant="outlined".
-	root	Styles applied to the root element.

소스 코드 (Source code)

이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.

• /packages/mui-lab/src/TimelineDot/TimelineDot.js

TimelineItem API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:

• Timeline

Import

import TimelineItem from '@mui/lab/TimelineItem';
// or
import { TimelineItem } from '@mui/lab';

Props

이름 (Name)	타입 (Type)	기본값 (Default)	필수 (Required)	설명 (Description)
children	node	-	No
classes	object	-	No	Override or extend the styles applied to the component.
position	'alternate-reverse' | 'alternate' | 'left' | 'right'	-	No
sx	Array<func | object | bool> | func | object	-	No	The system prop that allows defining system overrides as well as additional CSS styles.

참고 (Note): ref는 루트 요소(HTMLLIElement)로 전달됩니다.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달됩니다.

테마 기본 props (Theme default props)

MuiTimelineItem를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

전역 클래스 (Global class)	규칙 이름 (Rule name)	설명 (Description)
-	missingOppositeContent	Styles applied to the root element if TimelineOppositeContent isn't provided.
-	positionAlternate	Styles applied to the root element if position="alternate".
-	positionAlternateReverse	Styles applied to the root element if position="alternate-reverse".
-	positionLeft	Styles applied to the root element if position="left".
-	positionRight	Styles applied to the root element if position="right".
-	root	Styles applied to the root element.

소스 코드 (Source code)

이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.

• /packages/mui-lab/src/TimelineItem/TimelineItem.js

TimelineOppositeContent API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:

• Timeline

Import

import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
// or
import { TimelineOppositeContent } from '@mui/lab';

Props

이름 (Name)	타입 (Type)	기본값 (Default)	필수 (Required)	설명 (Description)
children	node	-	No
classes	object	-	No	Override or extend the styles applied to the component.
sx	Array<func | object | bool> | func | object	-	No	The system prop that allows defining system overrides as well as additional CSS styles.

참고 (Note): ref는 루트 요소(HTMLDivElement)로 전달됩니다.

제공된 다른 모든 props는 루트 요소(Typography)로 전달됩니다.

상속 (Inheritance)

위에 명시적으로 문서화되진 않았지만, Typography 컴포넌트의 props는 TimelineOppositeContent에서도 사용할 수 있어요.

테마 기본 props (Theme default props)

MuiTimelineOppositeContent를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

전역 클래스 (Global class)	규칙 이름 (Rule name)	설명 (Description)
-	positionAlternate	Styles applied to the root element if position="alternate".
-	positionAlternateReverse	Styles applied to the root element if position="alternate-reverse".
-	positionLeft	Styles applied to the root element if position="left".
-	positionRight	Styles applied to the root element if position="right".
-	root	Styles applied to the root element.

소스 코드 (Source code)

이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.

• /packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js

TimelineSeparator API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:

• Timeline

Import

import TimelineSeparator from '@mui/lab/TimelineSeparator';
// or
import { TimelineSeparator } from '@mui/lab';

Props

이름 (Name)	타입 (Type)	기본값 (Default)	필수 (Required)	설명 (Description)
children	node	-	No
classes	object	-	No	Override or extend the styles applied to the component.
sx	Array<func | object | bool> | func | object	-	No	The system prop that allows defining system overrides as well as additional CSS styles.

참고 (Note): ref는 루트 요소(HTMLDivElement)로 전달됩니다.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달됩니다.

테마 기본 props (Theme default props)

MuiTimelineSeparator를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

전역 클래스 (Global class)	규칙 이름 (Rule name)	설명 (Description)
-	root	Styles applied to the root element.

소스 코드 (Source code)

이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.

• /packages/mui-lab/src/TimelineSeparator/TimelineSeparator.js

더 알아보기 (Learn more)