BlazorでのWebアプリケーション開発手法１【C#】C03_table-striped

今回は、商品一覧の表示をストライプ表示（行の色を交互に変える表示）にする方法を解説します。

現在の表示を確認する

現在、商品一覧の画面はすべての行が白色で表示されており、行の区切りがやや分かりにくい状態になっています。

図1　現在の商品一覧画面（全行が白色）

この表示を担当しているのはProductPage.razor内のtable要素です。現在のclass属性にはBootstrapの標準クラスであるtableのみが指定されています。

図2　変更前のtable要素（class=”table”）

table-stripedクラスを追加する

class属性の値を編集し、tableの後ろにスペースを入力すると、Visual StudioのIntelliSenseによってBootstrapが用意しているtable関連のクラス候補（table-responsive-md、table-responsive-sm、table-secondary、table-smなど）が一覧表示されます。

図3　class属性入力時に表示されるIntelliSenseの候補一覧

この候補の中からtable-stripedを選択します。これがBootstrapで行の背景色を交互に変える（ストライプ表示にする）ためのクラスです。

図4　候補一覧からtable-stripedを選択

選択すると、class属性は以下のようにtable table-stripedという2つのクラスが半角スペース区切りで指定された状態になります。

<table class="table table-striped">
    <thead>
        <tr>
            <th>商品ID</th>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>

図5　変更後のtable要素（class=”table table-striped”）

動作を確認する

この状態で画面を確認すると、行の色がわずかに交互に変わっていることが分かります。ただし、今回のサンプルデータは3件しかないため、色の違いがやや分かりにくくなっています。

図6　table-striped適用後の表示（データ3件）

データを増やして分かりやすくする

ストライプ表示の効果をより分かりやすく確認するため、OnInitializedAsync内で_products.Addしている行をコピーして貼り付け、表示するデータの件数を増やします。

await Task.Delay(3000);
_products = new List<ProductEntity>();
_products.Add(new ProductEntity(100, "p100", 1000));
_products.Add(new ProductEntity(200, "p200", 2000));
_products.Add(new ProductEntity(300, "p300", 3000));
_products.Add(new ProductEntity(300, "p300", 3000));
_products.Add(new ProductEntity(300, "p300", 3000));
_products.Add(new ProductEntity(300, "p300", 3000));
// 以下、同様の行をコピーして追加

図7　_products.Addの行をコピーしてデータ件数を増やす

データ件数を増やして再度画面を確認すると、行ごとに背景色が交互に切り替わっている様子がはっきりと確認できます。

図8　table-striped適用後の表示（データ件数を増やした状態）

まとめ

一覧表示の行を色違いのストライプ表示にしたい場合は、table要素のclass属性にtable-stripedを追加するだけで実現できます。Bootstrapが用意している他のtable関連クラスと同様にclass属性へ追記するだけで適用できるため、ぜひ試してみてください。