타임라인 (Timeline)
타임라인 (Timeline)
출처: 문서
본문
시간순 정보를 시각적으로 표시하는 컴포넌트예요.
기본 사용법 (Basic Usage)
Timeline은 el-timeline 또는 el-timeline-item 컴포넌트 접두사로 정의할 수 있어요.
커스텀 노드 (Custom Node)
슬롯으로 노드를 커스터마이즈할 수 있어요.
커스텀 타임스탬프 (Custom Timestamp)
커스텀 슬롯을 사용해서 타임스탬프를 대체할 수 있어요.
배치 (Placement)
중심 축의 어느 쪽에든 배치할 수 있어요. placement 속성으로 위치를 제어해요.
API
Timeline 속성 (Attributes)
| Name | Description | Type | Default |
|---|---|---|---|
| reverse | 타임라인을 역순으로 표시할지 여부. 기본값은 false예요 | boolean | false |
Timeline 슬롯 (Slots)
| Name | Description |
|---|---|
| default | 기본 콘텐츠 |
Timeline-item 속성 (Attributes)
| Name | Description | Type | Default |
|---|---|---|---|
| timestamp | 타임스탬프 콘텐츠 | string | — |
| hide-timestamp | 타임스탬프 표시 여부 | boolean | false |
| center | 노드와 타임스탬프를 가운데에 배치할지 여부. timeline 타입이 top일 때만 동작해요 | string | — |
| placement 2.14.4 | 타임스탬프의 위치. 옵션: top / bottom | enum | — |
| type | 노드 타입 | enum | — |
| color | 노드의 배경 색상 | string | — |
| size | 노드 크기 | enum | normal |
| hollow | 노드가 비어 있는(빈) 형태인지 여부 | boolean | false |
| icon 2.14.6 | 노드의 아이콘 커스터마이즈 | string / Component | — |
| read-more 2.3.0 | 커스텀 더 읽기 콘텐츠 | string / Component | — |
| timestamp-format 2.14.6 | 타임스탬프 커스텀 포맷. 예: 'YYYY-MM-DD HH:mm:ss' | string / Function | — |
Timeline-item 슬롯 (Slots)
| Name | Description |
|---|---|
| default | 기본 콘텐츠 커스텀 |
| icon 2.14.6 | 아이콘 콘텐츠 커스텀 |