nlog

とめどなく流れるよだれ

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 )やグループの見た目を変更するバリデーションクラスも用意されている。