List

常配合其他組件用於顯示清單。使用類別為 .list 並以此作為子組件前綴詞。最簡易的列表組件可直接使用 <ul> 也可以使用 <div>。.list_item 可用於許多標籤上，例如 <li>、<button> 或者是 <a>。

Item 1
Item 2
Item 3
Item 4
Item 5

<ul class="list"> <li class="list_item"></li> </ul>

Item 1 Item 2 Item 3 Item 4 Item 5

<div class="list"> <a class="list_item"></a> </div>

複合式結構

可以為一個 List 組件添加 .list_head 與 .list_foot，而原本的 .list_item 則可以放置於 .list_body。

List Title

Item 1
Item 2
Item 3
Item 4
Item 5

<div class="list"> <header class="list_head"> <h4 class="list_title"></h4> </header> <ul class="list_body"> <li class="list_item"></li> </ul> <footer class="list_foot"></footer> </div>

外框樣式

可以在 .list 加上 .:bordered 為列表添加外框。

List Title

Item 1
Item 2
Item 3
Item 4
Item 5

<div class="list :bordered"></div>

內距調節

使用 .:tight 與 .:loose 可以調節內距，使得列表在不同時候可以調整空間。

Tight

List Title

Item 1
Item 2
Item 3
Item 4
Item 5

<div class="list :loose"></div>

Loose

List Title

Item 1
Item 2
Item 3
Item 4
Item 5

<div class="list :loose"></div>

搭配其他組件

每個 .list_item 可放置 .badge-count 來顯示統計數。

Item 1 10
Item 2 99+
Item 3

<ul class="list"> <li class="list_item"> {文字} <span class="badge-count">10</span> </li> </ul>

陳列使用者資料或是動態資訊。

A

Alfred Adler added you as a friend

Just
M

Michael added 2 new illustrations

1 hour ago
J

Jackson posted on his page

2 hour ago

Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another day soon.

<ul class="list"> <li class="list_item"> <div class="profile sz:sm"></div> </li> </ul>