Bileşenler

Timeline

Bir ray boyunca sıralı olaylar: işaret, başlık, zaman ve isteğe bağlı ayrıntı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Ton	İşaret	Token’lar
`neutral`	Gri nokta	`color-surface-layer-2`, `color-border-strong`
`brand`	Marka noktası	`color-status-brand-background`, `color-status-brand-emphasis`
`info`	Bilgi arka planı ve noktası	`color-status-info-background`, `color-status-info-emphasis`
`success`	Başarı arka planı ve noktası	`color-status-success-background`, `color-status-success-emphasis`
`warning`	Uyarı arka planı ve noktası	`color-status-warning-background`, `color-status-warning-emphasis`
`danger`	Tehlike arka planı ve noktası	`color-status-danger-background`, `color-status-danger-emphasis`

Ölçüler

Özellik	Değer	Token
İşaret	24 px	`timeline-marker-size`
Nokta	İşaretin %40’ı	`timeline-marker-size`
Ray kalınlığı	2 px	`timeline-rail-thickness`
İşaret ile metin arası	8 px	`space-md`
Olaylar arası	16 px	`space-xl`

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
`--bigbang-timeline-marker-size`		`24px24px24px`	`24px24px24px`
`--bigbang-timeline-rail-thickness`		`2px2px2px`	`2px2px2px`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-status-info-background`		`#e1f1ff#e1f1ff#e1f1ff`	`#0d304b#0d304b#0d304b`
`--bigbang-color-status-success-background`		`#def6e5#def6e5#def6e5`	`#103620#103620#103620`
`--bigbang-color-status-warning-background`		`#ffebd5#ffebd5#ffebd5`	`#422702#422702#422702`
`--bigbang-color-status-danger-background`		`#ffe8e7#ffe8e7#ffe8e7`	`#4c1d1d#4c1d1d#4c1d1d`
`--bigbang-space-md`		`8px8px8px`	`8px8px8px`
`--bigbang-space-xl`		`16px16px16px`	`16px16px16px`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
İlk görünüm	Olaylar sırayla 4 px kayarak belirir (`motion.listItem`)	`motion-list-enter-duration`, `motion-list-stagger`	`easing-productive-enter`	Yalnızca solar.