Timeline#

이벤트나 활동 내역을 시간 순서대로 시각적으로 나열하는 컴포넌트입니다.

Live Preview#

class TimelineDefaultExample extends StatelessComponent {
  const TimelineDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return CoTimeline(
      items: [
        CoreTimelineItem(title: 'Order placed', timestamp: '10:00 AM'),
        CoreTimelineItem(title: 'Processing', timestamp: '11:30 AM'),
        CoreTimelineItem(title: 'Shipped', timestamp: '2:00 PM'),
      ],
    );
  }
}

class TimelineDefaultExample extends StatelessWidget {
  const TimelineDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return CoTimeline(
      items: [
        CoreTimelineItem(title: 'Order placed', timestamp: '10:00 AM'),
        CoreTimelineItem(title: 'Processing', timestamp: '11:30 AM'),
        CoreTimelineItem(title: 'Shipped', timestamp: '2:00 PM'),
      ],
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 활동 이력, 변경 로그를 시간 순서로 나열할 때
• 각 이벤트에 제목, 날짜, 상세 설명이 필요할 때

대신 다른 컴포넌트를 사용하세요:

• Steps: 단계 간 진행형 프로세스
• Stepper: 다단계 폼

기본 사용법 (Basic Usage)#

CoTimeline(
  items: [
    CoreTimelineItem(
      title: 'Order placed',
      timestamp: '10:00 AM',
      description: 'Your order has been received.',
    ),
    CoreTimelineItem(
      title: 'Processing',
      timestamp: '11:30 AM',
    ),
    CoreTimelineItem(
      title: 'Shipped',
      timestamp: '2:00 PM',
    ),
  ],
)

CoTimeline(
  items: [
    CoreTimelineItem(
      title: 'Order placed',
      timestamp: '10:00 AM',
      description: 'Your order has been received.',
    ),
    CoreTimelineItem(
      title: 'Processing',
      timestamp: '11:30 AM',
    ),
    CoreTimelineItem(
      title: 'Shipped',
      timestamp: '2:00 PM',
    ),
  ],
)

Props / Parameters#

스타일 시스템 (Style System)#

Timeline 의 모든 chrome / dimensional / nested-slot 오버라이드는 CoreTimelineStyle<Clr> 단일 슬롯으로 흐릅니다 (Epic #1302 원칙 6/7/8). 시맨틱 enum (orientation) 은 위젯 파라미터로 직접 전달합니다.

시맨틱 vs 스타일#

• 시맨틱 / behaviour: 위젯 파라미터로 직접 (items, timeConstraints)
• chrome / dimensional / 슬롯 스타일: CoreTimelineStyle 한 곳으로 (dotColor / dotSize / dotBorderColor / dotBorderWidth / connectorColor / connectorThickness / gap / titleStyle / descriptionStyle)

Resolve chain#

design system default for timeline
  → CoreTimelineTheme.style                    // 프로젝트 공통
  → parent component slot override
  → widget.timelineStyle                       // 인스턴스별

각 nested 슬롯 스타일 (titleStyle / descriptionStyle) 은 CoreTextStyle 자체 resolve chain 으로 다시 한 번 머지됩니다.

슬롯 매핑 (CoreTimelineStyle 9 필드)#

Migration#

기존에는 인스턴스별 점 색상 / 연결선 색 / 텍스트 스타일을 노출하지 않았습니다. 새 코드는 timelineStyle 슬롯을 사용하세요:

사용 예 (Flutter)#

CoTimeline(
  items: [
    CoreTimelineItem(title: 'Order placed', timestamp: '10:00 AM'),
    CoreTimelineItem(title: 'Shipped', timestamp: '2:00 PM'),
  ],
  timelineStyle: CoreTimelineStyle<Color>(
    dotColor: Colors.blue,
    dotSize: 10,
    connectorColor: Colors.blueGrey,
    connectorThickness: 2,
  ),
)

사용 예 (Web)#

CoTimeline(
  items: items,
  timelineStyle: CoreTimelineStyle<CoreColor>(
    dotSize: 10,
    connectorThickness: 2,
  ),
)

CoreTimelineItem#

동작 스펙 (Behavior)#

• 수직으로 이벤트를 나열
• 점(dot) + 세로 연결선으로 시간 흐름 표현
• 마지막 아이템에는 연결선 없음

접근성 (Accessibility)#

• Flutter: Semantics로 이벤트 정보 전달
• Web: 의미론적 HTML 구조

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Steps: 단계별 진행 표시
• Stepper: 인터랙티브 다단계 폼