BlazorでのWebアプリケーション開発手法１【C#】D20_ラジオボタンにbootstrapを適応する

前回までの回で、計測設定画面（MeasureSettingPage.razor）にInputRadioGroup／InputRadioコンポーネントを使ったラジオボタンを作成しました。しかし現時点ではブラウザー標準の見た目のままで、チェックボックスやプルダウンのようにBootstrapのスタイルは適用されていません。今回は、これまでのチェックボックス回と同じ要領で、ラジオボタンにもBootstrapを適用していきます。

図1　現状の画面。チェックボックスとプルダウンはBootstrapスタイル済みだが、ラジオボタン（一般会員／ゴールド会員）だけがブラウザー標準の見た目のまま

1. 現在のコードを確認する

現在のInputRadioGroup部分のコードは次のとおりです。labelタグの中にInputRadioコンポーネントを配置し、その直後に選択肢のテキストを並べる形になっています。

図2　変更前のコード。InputRadioにはまだclass属性が指定されていない

<InputRadioGroup @bind-Value="_memberKind"
                  @bind-Value:after="MemberKindChanged">
    <label>
        <InputRadio Value="1" /> 一般会員
    </label>
    <label>
        <InputRadio Value="2" /> ゴールド会員
    </label>
</InputRadioGroup>

2. InputRadioにform-check-inputクラスを追加する

チェックボックスのときと同じ要領で、InputRadioタグにclass=”form-check-input”を追加します。ValueとInputRadioタグの間にカーソルを置いてclass属性を入力すると、IntelliSenseの候補一覧が表示されます。

図3　InputRadioタグにclass属性を追加する際のIntelliSense候補

一般会員・ゴールド会員、両方のInputRadioにclass=”form-check-input”を追加します。

図4　両方のInputRadioにform-check-inputクラスを追加した状態

<InputRadioGroup @bind-Value="_memberKind"
                  @bind-Value:after="MemberKindChanged">
    <label>
        <InputRadio class="form-check-input" Value="1" /> 一般会員
    </label>
    <label>
        <InputRadio class="form-check-input" Value="2" /> ゴールド会員
    </label>
</InputRadioGroup>

この状態で実行すると、ラジオボタン自体はBootstrapの丸いデザインになりますが、ラジオボタンとラベル文字の間隔が詰まっており、まだ見た目が整っていません。

図5　form-check-inputを追加した直後の実行結果。丸いデザインにはなったが間隔が詰まっている

3. labelとInputRadioをdivで囲んで1セットにする

ラベルとラジオボタンを1セットとして扱うため、それぞれをclass=”form-check”のdivタグで囲みます。これもチェックボックスのときと同じ考え方で、同一コンテナにまとめることで正しい余白が適用されるようになります。両方のラジオボタンに対して同様にdivで囲みます。

図6　labelとInputRadioをclass=”form-check”のdivタグで囲む

<InputRadioGroup @bind-Value="_memberKind"
                  @bind-Value:after="MemberKindChanged">
    <div class="form-check">
        <label>
            <InputRadio class="form-check-input" Value="1" /> 一般会員
        </label>
    </div>
    <div class="form-check">
        <label>
            <InputRadio class="form-check-input" Value="2" /> ゴールド会員
        </label>
    </div>
</InputRadioGroup>

実行すると、ラジオボタンとラベルの間隔が正しく調整され、他のBootstrapフォームパーツと同じ見た目で縦に並んで表示されるようになります。

図7　divで囲んだ後の実行結果。form-checkにより適切な余白で縦に並ぶ

4. 横並びにする（form-check-inline）

チェックボックスのときと同様、横に並べたい場合はclass=”form-check”に加えてform-check-inlineを追加します。両方のdivに対して同じようにクラスを追加します。

図8　form-checkクラスにform-check-inlineを追加する

<InputRadioGroup @bind-Value="_memberKind"
                  @bind-Value:after="MemberKindChanged">
    <div class="form-check form-check-inline">
        <label>
            <InputRadio class="form-check-input" Value="1" /> 一般会員
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label>
            <InputRadio class="form-check-input" Value="2" /> ゴールド会員
        </label>
    </div>
</InputRadioGroup>

実行すると、2つのラジオボタンが横並びで表示されるようになります。

図9　form-check-inlineを追加した後の実行結果。ラジオボタンが横並びになる

5. id・forを指定していない理由

ここで、チェックボックスのときの実装と見比べてみます。チェックボックス回では、input要素とlabel要素を別々に配置し、id属性とfor属性を明示的に指定することで両者を1セットとして結び付けていました。

図10　（コメントアウトされた）チェックボックス実装の例。idとforを明示的に指定して1セットにしている

一方、今回のラジオボタンの実装ではid・forを一切指定していません。それでもラベル文字をクリックするとラジオボタンが正しく反応します。これは、id・forによる紐付けではなく、label要素の中にInputRadio（input要素）そのものを配置しているためです。label内に配置されたinput要素は、そのlabelをクリックしたときに自動的に反応するというHTML標準の機能によるものです。

どちらの書き方が一般的かというと、id・forを明示的に指定する方法の方がよく使われる傾向にありますが、label内にinput要素を直接配置する今回のような書き方も、コード量が少なくシンプルに書けるという利点があります。状況に応じて使い分けるとよいでしょう。

まとめ

ラジオボタンへのBootstrap適用は、①InputRadioにform-check-inputクラスを追加する、②labelとInputRadioをclass=”form-check”のdivで囲む、③横並びにしたい場合はform-check-inlineを追加する、という3ステップで行えます。これはチェックボックスのときとほぼ同じ手順であり、Bootstrapのフォーム部品は共通のクラス設計になっていることがわかります。