nlog

とめどなく流れるよだれ

Semantic UI Doc ( Modules - Progress, Rating, Search, Shape ) を読む

css

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 上で回転するように見た目が変わる。