Bulma Doc ( Components ) を読んだ

Bulma Doc ( Components ) を読んだ。Elements や Form にも一部あるが、Components は構造を持つクラスとして分類されている。

Breadcrumb はパンくずリストをあらわし、インラインリストのアイテム間に自動的に境界線を挿入する。また、現在地を示すために .is-active クラスが用意されている。パンくずリストの配置を変更したり、アイテムにアイコンをつけたり、境界線の形状を変更したり、サイズを変更する Modifier も用意されている。

Card はいくつかの部品を内包するブロックで、その中にはヘッダーやフッター構造を追加するための部品もある。部品の組み合わせ方によってカードの構造は色々と変えられる。

Dropdown はドロップダウンのボタンとメニューを内包したコンポーネントである。ボタンをクリックするとメニューが表示され、もう一度クリックするとメニューが閉じる。クリックではなくマウスオーバーでメニューの開閉をしたければ .is-hoverable を使う。また、メニューを常に表示したければ .is-active を使う。メニューは通常ボタンの左端から下方向に向けて展開されるが、この配置は Modifier で変更可能。

Menu は縦にアイテムが配置されたメニューを表示する。サイドバーみたいなものを表示するのに使える。メニューの入れ子も可能。

Message は Notifictaion と少し似てる。色付きのブロックでヘッダーとボディを持つ。ヘッダーは取り外し可能。

Modal は 1 レイヤー上にモーダルボックスを表示する。要素を包括する .modal と、内包される .modal-background、.modal-content、.modal-close がある。このモーダルで画像を表示できたりもする。

Navbar で水平にアイテムが並ぶナビゲーションバーを表示できる。これはサイトのナビゲーションとして使われることを想定したつくりになっている。ロゴやハンバーガーボタンを載せるアイテムとして .navbar-brand が、メニューを表示するアイテムとして .navbar-menu がある。ナビゲーションを半透明にできる Modifier がある。

Pagination でページのナビゲーションが表示できる。ページを前後に移動するボタンと、番号を指定して移動するボタン。ボタンの形状を変える Modifier と、サイズを変える Modifier がある。

Panel は Card のように構造を持ち、ヘッダーとタブ、そしてブロック（ .panel-block ）といういろいろ内包できる要素を持つ。

Tab はタブ。配置を変更したり、アイコンをアイテムごとにつけたり、サイズやタブの見た目を変える Modifier が用意されている。これらの Modifier は組み合わせて使える。