nlog

とめどなく流れるよだれ

Semantic UI Doc ( Modules - Accordion, Checkbox, Dimmer, Dropdown ) を読む

css

Semantic UI の Accordion、Checkbox、Dimmer、Dropdown を読んだ。

JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。

Accordion

テーマは 2 つ。Accordion は開閉コンテンツを表示するのに使う。

.ui.accordion が全体を包むコンテナーになり、その下に各 Accordion のタイトルと説明文が続く。

<div class="ui accordion"> <!-- コンテナー -->
  <div class="active title"> ... </div> <!-- 1 つ目のタイトル --->
  <div class="active content"> ... </div> <!-- 1 つ目の説明文 --->
  <div class="title"> ... </div> <!-- 2 つ目のタイトル --->
  <div class="content"> ... </div> <!-- 2 つ目の説明文 --->
</div>

通常の Accordion は枠線などを持たないが、Modifier クラスを追加して .ui.styled.accordion とすれば枠線ありに見た目を変えることができる。

また、その他の見た目のバリエーションもある。

  • Fluid ... Accordion をサイトのコンテナー一杯に表示
  • Inverted ... 反転色

Checkbox

テーマは 2 つ。選択型のフォームを入力するのに使うもので、一般にはチェックボックスやラジオボタンと呼ばれるもののこと。

Checkbox はボタンとラベルがセットになっており、このセットを .ui.checkbox で包んで指定する。HTML は以下のようになる。

<!-- input は非表示にして、label の疑似要素でボタンを表示する -->
<div class="ui checkbox">
  <input type="checkbox" name="example" tabindex="0" class="hidden">
  <label>Make my profile visible</label>
</div>

見た目を少し変えることもできて、スライダーのように見せたり、iOS のトグルボタンのように見せたりすることができる。

また、状態クラスをいくつか持っている。

  • Read-only ... 読み取り専用
  • Checked ... チェック済み
  • Indeterminate ... 不確定（未入力）
  • Disabled ... 無効

通常の Checkbox は枠線などを持たないが、Modifier クラスを追加して .ui.fitted.checkbox とすれば枠線や影がついてページから浮き上がった見た目になる。

Dimmer

テーマはない。Dimmer は一部のコンテンツに集中させたいときに使うもので、具体的にはコンテンツの 1 レイヤー上に黒の透過レイヤーを上乗せして表示する。

.ui.dimmer で囲われた要素が Dimmer のコンテンツとして表示される。Dimmer は一部のコンテンツに適用することもできるし、ページ全体に適用することもできる。

アクティブと無効、2 つの状態を持っている。

見た目のバリエーションはいくつかあり、

見た目のバリエーションもいくつかある。

  • Blurring ... Dimmer の背景をぼかす
  • Vertical Alignment ... Dimmer 内に表示するコンテンツの縦方向の配置を指定
  • Simple Dimmer ... JavaScript なしに動作する
  • Inverted Dimmer ... 反転色（白の透過レイヤー）

Dropdown

テーマは 3 つ。ドロップダウンリストを表示するのに使う。Semantic UI のドロップダウンリストはデフォルトで開閉する際にアニメーションがついている。

.ui.dropdown のコンテナーがまずあり、その中にボタン（開閉スイッチ）とリストが含まれている形。Dropdown はフォーム部品にも適用可能で、実装されているコードを見ると input を非表示にして他の要素にスタイルを当てたりしている。また、検索ボックス付きのドロップダウンリストをつくることもできるようなので、拡張されたコンポーネントは最初から用意されている様子。Dropdown で選択したアイテムをボタンのそばに反映する、ということも簡単にできそうだ。

Dropdown のリストの構造はいくつかに分けることができる。

  • ヘッダー
  • 境界線
  • アイコン
  • 説明文（短い文）
  • ラベル
  • メッセージ（説明文よりは長いが短い文）
  • コンテンツを左右に配置（構造？）
  • 入力欄
  • 画像

状態は 4 つで、読み込み中、エラー、アクティブ、無効とある。

見た目のバリエーションもいくつか。

  • Scrolling ... リストの高さを決めてスクロールするようにする
  • Compact ... 最小の幅でリストを表示
  • fluid ... ボタンと同じ幅でリストを表示
  • Menu Direction ... ドロップダウンリストの中にドロップダウンリストを表示