Semantic UI Doc ( Modules - Sidebar, Sticky, Tab, Transition ) を読む

Semantic UI の Sidebar、Sticky、Tab、Transition を読んだ。

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

Sidebar

テーマはない。Sidebar はページのナビゲーションを見えないところに隠しておくのに使う。

.ui.sidebar で括られた要素はページの裏側に隠される。隠された要素はユーザーがボタンを押すなどアクションを起こしたときに表示される。

Sidebar の構造は Sidebar 自身（隠される要素）と Pusher （Sidebar を表示するアクション要素）の 2 つに分けられる。

見た目のバリエーションもあり、Sidebar を表示する場所をページの上下左右から選べる Direction と、Sidebar のサイズを指定する Width がある。

テーマはない。Sticky はページをスクロールしたときに、途中で要素を固定して表示させたいときに使う。

.ui.sticky で指定した要素が上述したような Sticky の効果を得る。

テーマはない。Tab は Menu によってアクティブ化したコンテンツを表示するときに使う。

Tab は .ui.tab で指定する。メニューとコンテンツ部分は data-tab 属性でつなげる。

Tab はコンテンツが表示されたアクティブ状態と、コンテンツが表示される前の読み込み中の状態がある。

テーマはない。Transition はコンテンツを表示・非表示させるときに使う。

つぎのように jQuery で Transition の対象とアニメーションの内容を指定するみたい。

$('.autumn.leaf') // 対象
  .transition('scale') // アニメーションの内容
;

アニメーションの種類はたくさん用意されている。Transitions はコンテンツの表示・非表示をトグルし、Static Animations はコンテンツを表示したままアニメーションする。

また、Transition はアニメーションの種類だけでなく時間など細かい調整も可能。

Semantic UI のドキュメント読む旅がようやく終わった。途中からこれが CSS の記事なのか何なのかわからなくなったが、とにかく最後までやりきれてよかった。