Semantic UI Doc ( Elements - Rail, Reveal ) を読む

Rail

Semantic UI の Rail を読んだ。レールにテーマはない。

レールはサイトのメインコンテンツに付随するオプションコンテンツを表示するのに使う。たとえば、ブログ記事がメインコンテンツで、前後の記事に移動するリンクがオプションコンテンツだ。

レールはメインコンテンツの左右に固定位置で表示される。幅は 300px、これは広告やサブナビゲーションを表示するのに最適なサイズだ。レールをモバイルなど幅が狭い環境でも表示するにはブレークポイントの指定が必要になる。

タイプが 3 つある。1 つ目はメインコンテンツの外側左右にレールを表示する。2 つ目はメインコンテンツの内側左右にレールを表示する。3 つ目はメインコンテンツとレールの間に境界線を敷いて、左右にレールを表示する。

見た目のバリエーションもいくつかある。コンテンツとレールを接着させて表示したり、コンテンツとレールを通常より近づけて表示したり、レールの中身の文字サイズを変更したりできる。

Reveal

Semantic UI の Reveal を読んだ。Reveal にテーマはない。

Reveal は何ていうか説明が難しいけど、マウスオーバーなどでコンテンツをアクティブ状態にしたときに、任意のアニメーションを加えながら表示を切り替えるためのもの。

3 つのアニメーションタイプがあり、「Fade」は非アクティブ状態の表示がその場で消えてアクティブ状態に切り替わる。「Move」は非アクティブ状態の表示が上下左右どこかに移動しながら消えてアクティブ状態に切り替わる。「Rotate」は非アクティブ状態の表示が左右どちらかに回転しながら消えてアクティブ状態に切り替わる。

マウスオーバーする前のコンテンツの状態を非アクティブ状態にすることもできるし、逆にアクティブ状態にすることもできる。

「Instant」バリエーションを指定すると、マウスオーバーした瞬間にアニメーションが開始されるようにできる（ transition-delay: 0s ）。