Semantic UI の Progress、Rating、Search、Shape を読んだ。
JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。
Progress
テーマは 4 つ。タスクの進行状況を伝えたいときに使う。
.ui.progress で指定した要素は横に伸びるバーの見た目になり、その中で進行状況を表すバーが表示される。進行状況部分のバーは、アニメーションをつけて状況が進んでいることを表現することもできる。
進行状況を表すバーの構造はいくつかに分かれている。
- バー
- 進行状況を表す値
- バーの内容を表すラベル
アクティブ状態、成功・警告・エラー状態、無効状態など、状態に関するスタイルもいくつか。
見た目のバリエーションもある。
- Inverted ... 反転色
- Attached ... 要素にくっつけてバーを表示
- Size ... 全体のサイズ指定
- Color ... バーの色の変更
- Inverted Color ... バーの色を反転色にする
Rating
テーマはない。Rating はコンテンツの評価を星やハートの段階で表したいときに使う。
星で評価を表すには .ui.star.rating でクラスを指定する。ハートで評価を表すには .ui.heart.rating でクラスを指定する。
HTML は以下のように書く。data-max-rating で評価の最大値を、data-rating でコンテンツの評価を示す。
<div class="ui heart rating" data-rating="1" data-max-rating="3"></div>
見た目のバリエーションはサイズだけある。
Search
テーマはない。Search はデータベースからキーワード検索するときに使う。見た目はフォームの入力欄。
通常の Search は .ui.search で指定し、このときは入力途中に候補がリストで表示される。カテゴリー型の Search は .ui.category.search で指定し、入力候補がカテゴライズされたリストで表示される。あとはデータベースからキーワードを検索するのではなく、サイトのローカルソースから検索する手段も用意されている。
この Module の状態は 1 つ。読み込み中の状態だけがある。
見た目のバリエーションは複数ある。
- Fluid ... 検索結果をコンテナー幅一杯に表示
- Aligned ... 検索結果をコンテナーの左右どちらかに寄せて表示
Shape
テーマはない。挙動に 3D オブジェクトのエフェクトを加えたいときに使う。
.ui.shape で指定した要素は、表示が切り替わるときに 3D 上で回転するように見た目が変わる。
