Timeline

用於記錄多筆以時間為主的資料。使用類別為 .timeline 並以此為子元件前綴詞。

每個時間點是一個 .timeline_item;每一個時間區段的主題則是可以使用 .timeline_era;時間軸線則是 .timeline_axis;時間點的內容則置放於 .timeline_content

2018

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

2019

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

<div class="timeline"> <h4 class="timeline_era">2018</h4> <div class="timeline_item"> <div class="timeline_axis"></div> <time class="timeline_time"></time> <div class="timeline_content"> <h6></h6> <p></p> </div> </div> </div>

狀態

標記某個時間點可在 .timeline_item 加上 .is:on,若要弱化則是加上 .is:off

2018

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

is:on

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

is:off

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

<div class="timeline_item is:on"></div> <div class="timeline_item is:off"></div>

配色

可在 .timeline_item 加上 .clr:{*},可使用四個基本色、色票群。

基本色

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Dark

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Dark

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Light

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Light

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

色票

Red

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Red

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Orange

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Orange

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Fire

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Fire

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Yellow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Yellow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Olive

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Olive

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Sapphire

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Sapphire

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Cyan

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Cyan

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Magenta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Magenta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Bone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Bone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Silver

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Silver

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Momo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Momo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Rosewood

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Rosewood

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Skin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Skin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Chartreuse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Chartreuse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Green

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Green

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Aegean

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Aegean

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Blue

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Blue

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Violet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Violet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Brown

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Brown

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Gray

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Gray

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Black

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Black

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

品牌色

Youtube

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Youtube

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Google

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Google

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Pinterest

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Pinterest

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Weibo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Weibo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Rss

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Rss

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Snapchat

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Snapchat

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Whatsapp

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Whatsapp

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Wechat

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Wechat

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Line

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Line

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Slack

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Slack

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Tumblr

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Tumblr

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Behance

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Behance

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Messager

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Messager

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Skype

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Skype

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Dropbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Dropbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Viemo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Viemo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Linkedin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Linkedin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Facebook

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Facebook

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Vk

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Vk

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Paypal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Paypal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Yahoo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Yahoo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Vue

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Vue

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

React

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

React

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Angular

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

Angular

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet deserunt distinctio et fuga harum laboriosam maiores, minima molestias odit officia officiis optio quaerat quas, quia quidem totam, ullam voluptates!

<div class="timeline_item clr:{color}"></div>

樣式

Timeline 提供以下幾種排版方式。


Inline

讓時間與內容水平排列。在 .timeline 加上 .:inline

2018

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

2019

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

<div class="timeline :inline"></div>

Crossed

讓每個時間點錯位排列。在 .timeline 加上 .:crossed

2018

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

2019

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

<div class="timeline :crossed"></div>

Horizontal

時間軸呈現水平排版。在 .timeline 加上 .:horizontal

2018

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

2019

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

<div class="timeline :horizontal"></div>

Horizontal Crossed

時間軸穿越時間與內容並水平排版。在 .timeline 加上 .:horizontal-crossed

2018

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

2019

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet aut cum deleniti enim eum explicabo id ipsum modi mollitia nesciunt quasi sed tempora unde, velit? Aliquam eos omnis tempora!

<div class="timeline :horizontal-crossed"></div>
右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.