4検査結果表示について⑤

今回は前回グルーピングを行ったグループ名の項目が少々小さく、見づらい為、cssの編集を行っていく。

<ons-list-header>{{ group.groupName }}</ons-list-header>

まずhtmlの上記コードを下記の様にする

<ons-list-header class="group">{{ group.groupName }}</ons-list-header>

この処理はons-list-header にクラス属性を付与するといったものである。今回は名称をgroupとしている。
次にcssファイルに下記のコードを記述する。

ons-list-header.group{
    font-size:30px;
    background-color: rgb(71, 228, 92);
    height: 35px;
    padding-top:3px;
}

上記のコードは先ほど定義したクラスに対する詳細設定である。フォントサイズ、背景色、高さ、高さの調節等を行っている。

図1 CSSでグループ名を装飾した結果

これらの処理を行った後、アプリケーションにて確認すると上記図１の様にグループ名を見やすくすることが出来た。
次回は指定した日付に対応する配列要素を抽出するといったコードの記述を行っていきたい。

---

【コメント】
検査項目をグルーピングして表示する件についてはこれで完成ですね。
次へ進んでいきましょう。