Bulma Doc ( Form ) を読んだ
Bulma Doc ( Form ) を読んだ。
Bulma はデザインの一貫性を保つためにブラウザのフォームコントロールをカスタマイズしている。フォームコントロールには何種類かあって、
.label... 項目名.input... 入力欄.textarea... 複数行の入力欄.select... セレクトボックス.checkbox... チェックボックス.radio... ラジオボタン.button... ボタン.help... 注意書きや、バリデーションの結果を返す文章
とかある。
また、フォームの項目同士の間を良い感じに空けるために、フォームフィールド（ .field ）というコンテナークラスも用意されている。これは項目ごとに設定する。
<div class="field"> <label class="label">Label</label> <div class="control"> <input class="input" type="text" placeholder="Text input"> </div> <p class="help">This is a help text</p> </div> <div class="field"> ... </div>
フォームコントロールのサイズを変更したり、Font Awesome のアイコンをつけたり、入力欄とボタン一体型にしたり、色々カスタマイズもできるみたい。
ボタングループも用意してあって、ボタンをコンテナーの幅に対して左・右・中央寄せにできる。ボタンは 1 つでも複数でも良い。
名字と名前のように、複数の入力欄を横に並べたいときがあると思うけど、そういうときのためのクラスも用意されている。
ラベルのデザインやヘルプテキストのサイズ、フォームコントロールの余白や角丸のサイズは変数を変更することでカスタマイズ可能。
ここからはそれぞれのフォームコントロールの詳細について。まず Input （入力欄）については、色・サイズ・状態を変更する Modifier が用意されている。input 要素の type 属性に関しては以下をサポート。
type="text"type="password"type="email"type="tel"
状態の Modifier は 5 つある。
- Normal
- Hover （
.input.is-hovered） - Focus （
.input.is-focused） - Loading （
.input.is-loading） - Disabled （
.input[disabled） - Readonly （
.input[readonly]）
Textarea （複数行の入力欄）と Select （セレクトボックス）は基本的に Input フォームコントロールと同じで、色・サイズ・状態を変更する Modifier が用意されている。Textarea の入力欄の高さを変えるには HTML の row 属性を変更する。
Checkbox や Radio は label の中に input 要素を入れ子にして指定する。これらについてはブラウザ感の互換性と UX を維持するために、意図的にスタイリングしてない。
<!-- Checkbox の例 --> <label class="checkbox"> <input type="checkbox"> I agree to the <a href="#">terms and conditions</a> </label>
ファイルアップロードボタンをカスタマイズする File フォームコントロールも用意されている。div.file label.file-label で input type="file" 要素をラップして使う。
<div class="file"> <label class="file-label"> <input class="file-input" type="file" name="resume"> <span class="file-cta"> <span class="file-icon"> <i class="fas fa-upload"></i> </span> <span class="file-label"> Choose a file… </span> </span> </label> </div>
ファイル名が表示するには .file-name を追加する。ファイル名の表示はボタンと位置を左右逆に入れ替えたり、ボタンの下に出したりもできる。ボタンの色を変えたり、サイズを変更することももちろん可能。
