Semantic UI Doc ( Views - Card, Comment, Feed, Item, Statistic) を読む
Semantic UI の Card、Comment、Feed、Item、Statistic を読んだ。
Card
テーマは 4 つ。Card は画像やテキストをひとまとまりの構造として見せたいときに使う。
Card 単体は .card で指定し、複数の Card を並べるときは .ui.cards でグループ化する。Flexbox により、グループ化された Card の高さは自動的に同じになる。
Card の構造はいくつかに分けることができ、以下のようになる。
- コンテンツブロック
- 画像
- ヘッダー
- メタデータ
- リンク
- ボタン
- お気に入りなどのアクション要素
- 説明文
また、Card には見た目のバリエーションがある。
- Fluid Card ... コンテナーの幅一杯に広がる
- Centered Card ... コンテナーの中央に配置される
- Raised Card ... ページから浮いているように見える
- Link Card ... リンクが付いている
- Floated Content ... 左右にコンテンツを配置
- Text Alignment ... 書式方向の指定
- Colored ... Card の最下部に色付きの線を付ける
- Column Count ... 1 行の中に表示する Card の数を指定
- Stackable ... モバイルでは複数の Card を 1 列に縦積みする
- Doubling ... モバイルでは複数の Card を 2 列に縦積みする
Comment
テーマは 2 つ。Comment はユーザーのフィードバックをサイトに表示させたいときに使う。
Comment は .comments で囲んだコンテナーの下に、コメントとコメント入力欄を備えている。
Comment の構造はいくつかに分けることができ、以下のようになる。
Comment は表示を折りたたむことができ、開いている状態・閉じてる状態を持つ。
また、見た目のバリエーションがいくつかある。
- Threaded ... 返信などのコメントの関係が見えるように、スレッドのように見せる
- Minimal ... コメントをコンパクトにする
- Size ... 全体のサイズを調整する
Feed
テーマは 2 つ。Feed はユーザーの活動を時系列に沿って表示するときに使う。
.ui.feed で囲んだコンテナーの下にいくつかの要素を備えている。
構造はいくつかに分けることができ、以下のようになる。
- ラベル
- 日付
- 追加情報（画像やテキスト）
全体的なサイズを変えるためのバリエーションも用意されている。
Item
テーマはない。Item は画像やテキストをひとまとまりの構造として見せたいときに使うという点で Card とよく似た View だ。
通常 Item は画像とテキスト情報を横並びにして表示するが、モバイルで表示したときは縦積みして表示する。
Item 自体は .item で指定し、グループ化した Item は .items で包んで指定する。
構造はいくつか分けることができる。
- 画像
- コンテンツ（テキストなど）
- ヘッダー
- メタ情報
- リンク
- 説明文
- Like や Fav などの評価アクション
見た目のバリエーションも複数用意されている。
- Stacking ... モバイルで縦積み表示しない（デスクトップと同じ横並びのままコンテンツを縮小する）
- Divided ... Item と Item の間に境界線をつける
- Relaxed ... Item 同士の余白を広げる
- Link Item ... Item をリンク化
- Vertical Alignment ... 画像と並ぶテキストの縦の配置を指定する
- Floated Content ... 左右にコンテンツを配置
Statistic
テーマはない。料金表の値段など、一部の値と単位を強調するのに使う。Statistic はグループ化して使うこともできる。
構成要素はシンプルで、値と単位（ラベル）だけ。
見た目のバリエーションはいくつかある。
- Horizontal Statistic ... 値と単位を横に並べる
- Colored ... 値に色を付ける
- Inverted ... 反転色
- Evenly Divided ... グループ化したとき、Statistic の幅を均等に割り振る
- Floated ... 左右どちらかで Statistic の配置を指定
- Size ... 値のサイズを指定する
最近ずっと同じようなこと書いてたけど、やりたいことがこれじゃない感。さっさと切り上げるため、Views の残りをまとめて書いた。
