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"> <div class="timeline_item"> <h4 class="timeline_era">2018</h4> <div class="timeline_axis"></div> <time class="timeline_time"></time> <div class="timeline_content"></div> </div> ... </div>

狀態

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

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!

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"> <div class="timeline_item"></div> <div class="timeline_item is:on"></div> <div class="timeline_item is:off"></div> </div>

配色

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

2018

Primary
Primary is:on

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!

Secondary
Secondary is:on
Dark
Dark is:on
Light
Light is:on

2019

Red
Red is:on
Orange
Orange is:on
Fire
Fire is:on
Yellow
Yellow is:on
Olive
Olive is:on
Sapphire
Sapphire is:on
Cyan
Cyan is:on
Magenta
Magenta is:on
Bone
Bone is:on
Silver
Silver is:on
Momo
Momo is:on
Rosewood
Rosewood is:on
Skin
Skin is:on
Chartreuse
Chartreuse is:on
Green
Green is:on
Aegean
Aegean is:on
Blue
Blue is:on
Violet
Violet is:on
Brown
Brown is:on
Gray
Gray is:on
<div class="timeline_item clr:{*}"></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!

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!

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!

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!

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>