Bulma Doc ( Elements ) を読んだ

Bulma Doc ( Elements ) を読んだ。

Elements には他の要素を包括する Box やインターフェイス要素のボタンが分類されている。

まず Box は他の要素を包括する要素である。

つぎに Button たが、これはそのままボタン。ひとつのベースクラス .button と、色やサイズを変更する Modifier を持つ。a 要素、button 要素、input type="submit" 要素、input type="reset" 要素に対応している。塗と枠線のスタイルを選べたり、角を完全に丸めたりもできる。クラスや属性指定による状態（ hover など）の見た目指定も可能。ボタングループも用意されているので、いくつのボタンをまとめて整列させたいときに便利。タブのように、3 つのボタンの左右角丸真ん中角丸なしみたいにしたければ、ボタンを .buttons.has-addons で囲む。

Content。これは .content で包括した HTML 要素に対する指定で、見出しや段落、リストの見た目を変える。サイズ変更の Modifier を持つ。

削除操作用に Delele も用意されている。これは他のコンポーネントと組み合わせて使う削除ボタン。タグや通知、メッセージコンポーネントと組み合わせて使うこともできるの。サイズ変更の Modifire を持つ。

Bulma のIcon は FontAwesome などのアイコンフォントライブラリーを利用している。アイコンは通常 1.5rem x 1.5rem で領域を取る。色とサイズの Modifier を持つ。

画像のサイズ指定用に Image がある。固定で正方形の画像サイズを指定するには .image.is-16x16px などを使う。比率で画像サイズを指定するには .image.is-5by4 などを使う。

Notification はユーザーに伝えたいことがあるときに使う色付きのブロック。

Progress Bar は何かしらの進行状況を伝えるのに使う。

構造的なデータを表示するには Table を使う。基本は table 要素に .table を指定するだけで、あとはその構造に従ってスタイルがあたる。テーブルの枠線や余白を調整したり、一行だけハイライトを入れたければ Modifier クラスを使う。

Tag では背景色付きラベルを表示できる。

Title のデザインは 2 種類用意されていて、.title と .subtitle がある。.title は太字、.subtitle は通常のウエイトで文字を表示する。それぞれ .is-1 〜 .is-6 の Modifier クラスがある。.title と .subtitle は並べて表示することもできるが、このときに要素同士の余白を調整したければ .title.is-spaced を使う。