Semantic UI Doc ( Collections - Table ) を読む
Semantic UI の Table を読んだ。テーブルにテーマは 4 個ある。
テーブルは基本的に項目とそれに紐づくデータの集合であり、情報を構造的に見せたいときに使う。Semantic UI のテーブルは、モバイルサイズになると自動的にコンテンツが縦に並ぶように設計されている。
テーブルはタイトルやテキスト文章、アイコンや画像など、様々なコンテンツを内包することができる。また、テーブルの最初の列を項目名として使うこともできる。それ以外にも、ひとつの行に複数の値をネストさせるなど、より構造的なテーブルにすることもできる。色々できる。
状態に関するスタイルはいくつかある。
- ポジティブ ... デフォルトでは背景・文字・アイコンが緑色になる
- ネガティブ ... 背景・文字・アイコンが赤くなる
- 警告 ... 背景・文字・アイコンが黄色くなる
- アクティブ ... 背景・アイコンがグレーになる
- 非アクティブ ... 文字が薄くなる
以下のように見た目のカスタマイズもできる。
- 列の幅を等幅に揃えた見た目
- 列と列の間に線を敷いた見た目
- マウスオーバーしたときにテーブルの行をハイライトする見た目
- 垂直・水平方向の書式方向を指定した見た目
- ストライプ模様のように行の背景色を交互に変えた見た目
- 枠線を取り払った見た目
- 列の幅を指定した見た目
- テーブル最上部に色付きボーダーをつけた見た目
- 反転色の見た目
- 背景色を指定した見た目
- テーブル全体のサイズを指定した見た目
また、項目名をクリックしたときにデータの並び順を変えるなど、ユーザー操作による挙動を追加することもできる。
細かいカスタマイズもできるし、Semantic UI のテーブルは扱いやすそうだと思った。
