Semantic UI Doc ( Collections - Breadcrumb, Form ) を読む
Breadcrumb
Semantic UI の Breadcrumb を読んだ。パンくずリストにテーマはない。
.ui.breadcrumb
でパンくずリストを表示できる。リストアイテムの区切り記号はスラッシュだが、アイコンフォントなどで別の記号に変更することもできる。
リストアイテムは通常テキストかリンクテキストを含めることができ、またアイテムのアクティブ状態を示すためのクラスもある。
パンくずリストはサイズ変更もできる。
Form
Semantic UI の Form を読んだ。フォームにテーマは 4 個ある。
フォームは入力欄とラベルを構造的に見せるのに使う。
<form class="ui form"> <div class="field"> <label> ... </label> <input type="text" name="..." placeholder="..."> </div> <div class="field"> <div class="ui checkbox"> <input type="checkbox" tabindex="0" class="hidden"> <label> ... </label> </div> </div> <button class="ui button" type="submit"> ... </button> </form>
上記には以下のフォーム部品が含まれている。
.ui.form
.field
.ui.checkbox
これら以外にもセレクトボックスや、トグル型のチェックボックスなどがある。
フォームフィールドにはラベルと入力欄を含むことができる。複数行のテキストは textarea
要素で表示することができ、高さは rows
属性で変更できる。チェックボックスやラジオボタン、ドロップダウンリストは JavaScript を使ってユーザーエージェントの見た目を変更することもできる。
状態もいくつかあり、読み込み中、フォーム入力の成功・エラー・警告、フォームの無効状態、読み取り専用の見た目のフォームなど。
フォームには見た目のバリエーションがあり、サイズを変更したり、入力欄の幅を調整したり、反転色の見た目にしたりできる。また、フォーム全体ではなく、フィールド( .field
)やグループの見た目を変更するバリデーションクラスも用意されている。