Semantic UI Doc ( Elements - Segment ) を読む

Semantic UI の Segment を読んだ。セグメントにテーマは 2 個ある。

セグメントは関連コンテンツのグループをつくるのに使う。いくつかタイプがあり、「Raised」はページの上に浮遊しているような表示に、「Stacked」は複数のページが重なったような表示に、「Piled」は複数のページが散らばりながら重なった表示に、「Vertical Segment」はセグメントを水平線で分断する表示。

グループ化もできる。セグメントの入れ子もできるし、水平にセグメントを並べることもできる。グループ化した際の仕切り線に色をつけたりもできる。また、グループの中でセグメントの注目度を落としたければ .ui.secondary.segment を使い、背景色をグレーにする。

セグメントには通常の状態に加えて、無効状態、読み込み中状態がある。

バリエーションもいくつかあり、反転色にしたり、Attached Header や Attached Message をくっつけたり、セグメント内部の余白を広げたり、コンパクトな見た目にしたり、セグメントの上部ボーダーに色を付けたり、背景色に色を付けたり、前述したような注目度を落とすために見た目を変えたり、円形にしたり、float でセグメントを左右に並べたり、書式方向を変更したり、枠線や背景を取っ払ったシンプルな見た目にしたりできる。