Semantic UI Doc ( Elements - Input, Label ) を読む

Input

Semantic UI の Input を読んだ。入力欄にテーマは 2 個ある。

入力欄は以下のように、.ui.input コンテナーで input 要素を包んで表示する。

<div class="ui input">
  <input type="text" placeholder="Search">
</div>

フォーカス、読み込み中、入力無効、エラーなどいくつか状態をあらわすクラスがある。

また、見た目を変更するためにバリエーションも用意されており、入力欄にアイコンをつけたり、入力欄の前後に prefix / suffix のようなラベルをつけたり、アクションボタン（またはドロップダウンメニューなど）をつけたり、入力欄の枠線を取り除いたシンプルな見た目にしたり、色を反転させたり、幅いっぱいに入力欄を表示したり、入力欄のサイズを変更したりできる。

Label

Semantic UI の Label を読んだ。ラベルにテーマは 2 個ある。

ラベルは .ui.label で表示でき、角丸つきのベタ背景に小さなテキストの見た目をしている。（※フォームのラベルではない）

ラベルは背景色を変えることもできるし、アイコンや画像と一緒に表示することもできる。また、三角の突起をラベルから伸ばすことで、吹き出しのような見た目にすることもできる。

ラベルを画像やブロックの四隅につけることもできるが、この場合は親要素に position: relative が必要。角丸の画像やブロックにラベルをつけるときは、親要素に overflow: hidden も必要。

タグ（というか値札）のように穴あきの見た目にしたり、リボンのように折り返しをつけた見た目にしたり、上下または四隅どこかにくっついた見た目にしたり、水平方向にコンテンツを並べることを想定したラベルの見た目にしたりできる。

ラベルの形状を円形にしたり、ベタ背景から枠線にしたり、色を変えたり、サイズを変えたりできるバリエーションクラスがある。

複数のラベルをグループ化して表示することもできる。