components/timeline
데이터 표시 · 26 / 64

Timeline

ui.widgets.Timeline

시간이나 상태별로 세로 이벤트를 표시합니다.

BEHAVIOR CONTRACT

completed / current / pending, 시간, 제목, 설명이 하나의 레일에 정렬됩니다.

RECORDED INTERACTION

주문의 수명 주기를 보여 줍니다.

examples/storybook/stories.zig:681
// ── Timeline ──
pub fn buildTimeline(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const items = [_]W.TimelineItem{
        .{ .title = "Created", .description = "Order placed", .time = "09:00", .status = .completed },
        .{ .title = "Shipped", .description = "In transit", .time = "12:30", .status = .active },
        .{ .title = "Delivered", .description = "Pending", .status = .pending },
    };
    return W.Timeline(.{ .items = &items }).mount(scope, cx);
}
GitHub에서 소스 보기examples/storybook/stories.zig:681

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

zenit · 이중 라이선스오픈 소스 프로젝트는 GPL-3.0-only로 무료 사용할 수 있으며, 비공개 소스나 상용 제품에는 상용 라이선스가 필요합니다.작성자 연락처: zongyi.xzy#gmail.com (#을 @로 바꾸세요)zenit 5f9add5+wip 2026-09-30