データを表示する
さて、次はデータを表示するためのコンポーネント群にも目を向けてみましょう。この分類になるものは表3に挙げました。
| UIの種別 | 概要 |
|---|---|
| Badge | 未読件数などを表示するバッジ |
| Chip | 小さい情報カードを表示する |
| Icons | アイコンを表示する |
| Item | リストの行を表現する |
| List | リストを表現する |
| Media | 画像を表示する |
| Typography | テキストを表示する |
こちらも組み合わせで活きるケースが多いので、組み合わせながら簡単な使い方を紹介します。まずは、「Chip」の<ion-chip>と「Icons」の<ion-icon>を組み合わせてみましょう（リスト4）。
<h2>Chip & Icons</h2> <!-- (1) --> <ion-chip color="primary">Primary</ion-chip> <ion-chip color="success"> <!-- (2) --> <ion-icon name="checkmark-circle-outline"></ion-icon> <ion-label>Success</ion-label> </ion-chip>
リスト4を実際に表示すると、図7のようになります。
まず、Chipは基本的に、（1）のような小さく簡潔なテキストを表示して、ステータスなどを表すために利用するUIです。color属性に所定の配色を与えて、情報を表現します。そしてさらに、（2）のように<ion-icon>を組み合わせることで、表現力が向上します。
<ion-icons>は、name属性に表示したいアイコンの名前を指定することで、そのアイコンを表示できるコンポーネントです。ここで利用できるアイコンは「Ionicon（アイオニコン）」と呼ばれており、Ionic Framework以外のプラットフォームでも利用可能なアイコンセットとして、配布されています（図8）。
（2）ではSuccessという文言に合わせて、丸で囲んだチェックマークを表すcheckmark-circle-outlineというアイコンを選びました。Chip内の文言を表す<ion-label>よりも前に配置すれば左側に、後ろに配置すれば右側にアイコンが現れます。
次の例として、「List」の<ion-list>と、その要素である「Item」の<ion-item>でリストを作成します。ついでに、「Badge」の<ion-badge>を使って、付加情報の表示も行ってみましょう（リスト5）。
<h2>List & Item & Badge</h2>
<!-- (1) -->
<ion-list>
<!-- (2) -->
<ion-item>
<!-- (3) -->
<ion-label>Item</ion-label>
<!-- (4) -->
<ion-badge>100</ion-badge>
</ion-item>
<ion-item>
<ion-label>Item</ion-label>
<ion-badge>50</ion-badge>
</ion-item>
<ion-item>
<ion-label>Item</ion-label>
<ion-badge>2</ion-badge>
</ion-item>
</ion-list>
リスト5を実際に表示すると、図9のようになります。
リスト表示をしたい場合は、（1）のように、まず一番外側に<ion-list>を配置します。各項目にあたるのが（2）の<ion-item>です。シンプルなケースであれば、<ion-item>の直下にタイトルとなる文字列を直接記述しても問題ありませんが、項目内の表現に一工夫を入れたい場合は、（3）のようにテキストを<ion-label>に入れておきます。
今回はデータの件数のようなUIを表示したかったので、（4）では<ion-badge>を<ion-label>の後ろに入れています。このように、コンポーネントを組み合わせることでリッチな表示を実現できます。
まとめ
今回は、Ionic Frameworkの多彩なコンポーネントの一部を解説しました。他にも魅力的なコンポーネントがたくさんあるので、調べてみるとよいでしょう。
次回は、ReactコンポーネントからWeb Components製のコンポーネントを利用する方法について解説します。お楽しみに。
