Semantic UI Doc ( Elements - List ) を読む

Semantic UI の List を読んだ。リストにテーマはない。

リストは親要素に .ui.list をつけて表示する。div 要素でリストを表現する場合は、追加で子要素に .item を指定して表示する。リストは入れ子にすることができ、階層をつくりだせる。

div 要素で指定したリストにバレット（黒ポチ）はない。バレットをつけるには .ui.bulleted.list を指定するか、指定する要素を ul 要素に変更する。.ui.horizontal.bulleted.list でインラインリストを表示することもできる。この指定ではアイテムの境界がバレットになる。

順序付きリストは .ui.ordered.list で表示できる。順序付きリストの場合、リストを階層化すると親は 1 、2 、3 ... と番号が付き、子は 1.1 、1.2 、1.3 ... と番号が振られていく。順序付きリストでは、li 要素の value 属性を指定すれば好きな文字列で番号部分を変更できる。

ナビゲーションリンクのリストを表示するには .ui.link.list を指定する。このリストにはリンクをアクティブ状態に見せるクラスが用意されている。

リストに含むことができるコンテンツは、文字列、アイコン、画像、リンク、ヘッダー、説明文（ .description ）がある。

リストには見た目のバリエーションもあり、水平にアイテムを並べたリスト、番号付きで水平にアイテムを並べたリスト、黒背景などを想定した反転色のリスト、アイテムを選択できるリスト（マウスオーバーなどの状態で表示が変わる）、アニメーション付きでアイテムを選択できるリスト（マウスオーバーなどの状態で表示が変わる）、余白を調整したリスト、アイテムに境界線をつけたリスト、サイズのバリエーションなどなど。

リストのコンテンツの中身についても見た目を指定することができ、たとえば水平に画像と文章を並べた場合の縦方向の配置を指定したりできる。