nlog

とめどなく流れるよだれ

Semantic UI Doc ( Modules - Embed, Modal, Nag, Popup ) を読む

css

Semantic UI の Embed、Modal、Nag、Popup を読んだ。

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

Embed

テーマはない。Embed は YouTube や Google Maps のような外部コンテンツをサイトんい貼り付けるときに使う。

Embed のスタイルを適用したい場所には .ui.embed を指定する。表示する場所の比率を指定したい場合は .ui[class*="4:3"].embed のようにアスペクト比を合わせて指定する。

Modal

テーマは 2 つ。Modal は他の操作を中断して 1 つの操作に集中させたいときに使う。

.ui.modal で指定した Modal はページの 1 レイヤー上に黒の透過レイヤーを敷き、さらにその上にレイヤーを重ねてコンテンツを表示する枠を取る。.ui.basic.modal で指定した Modal はもう少しシンプルで、1 レイヤー上に黒の透過レイヤーを敷いてその中にコンテンツも表示する。

構造はいくつかに分けることができる。

  • ヘッダー
  • コンテンツ（テキストなど）
  • 画像
  • アクション要素（ボタンなど）

見た目のバリエーションもある。

  • Full Screen ... コンテナーの幅一杯にモーダルを表示
  • Size ... 全体的なサイズの指定
  • Scrolling Content ... モーダルの最大の高さを決めて、最大を超えるとコンテンツがスクロールして見れるようにする

また、モーダルは .active という状態クラスを持っている。

Nag

テーマはない。ユーザーによって取り消されるまで表示したい重要なメッセージを出すのに使う。キャンセルボタン付きのお知らせバー。

使い所としては、サイトが Cookie 情報を取得していることや、セキュリティの重要な変更の通知などに使うことを想定しているらしい。

シンプルな Module でこれ以上説明することもない。

Popup

テーマはない。マウスオーバーした要素と近接する四方どこかに補足情報を表示したいときに使う。

Popup で文章を表示したい場合は data-content="" 属性、タイトルを表示したい場合は data-title="" 属性を、HTML を表示したい場合は data-html="" を使う。また、data 属性を使わなくとも、.ui.popup で囲った要素として外出しして指定することもできる。

いくつかバリエーションがあり、見た目は少し変えられる。

  • Basic ... 通常 Popup は吹き出し付きで表示されるが、この吹き出しアイコン（三角アイコン）を表示しない指定
  • Width ... data-variation="wide" などを合わせて指定することで Popup の幅を広げる
  • Fluid ... コンテナー一杯で表示
  • Size ... 全体的なサイズの指定
  • Flowing ... Popup に最大幅を持たせない指定
  • Inverted ... 反転色（黒背景に白文字）