【Web Components入門】Ionic Frameworkで使えるカスタム要素を学ぼう

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第6回

データを表示する

　さて、次はデータを表示するためのコンポーネント群にも目を向けてみましょう。この分類になるものは表3に挙げました。

表3：データを表示するためのコンポーネント

UIの種別	概要
Badge	未読件数などを表示するバッジ
Chip	小さい情報カードを表示する
Icons	アイコンを表示する
Item	リストの行を表現する
List	リストを表現する
Media	画像を表示する
Typography	テキストを表示する

　こちらも組み合わせで活きるケースが多いので、組み合わせながら簡単な使い方を紹介します。まずは、「Chip」の<ion-chip>と「Icons」の<ion-icon>を組み合わせてみましょう（リスト4）。

［リスト4］ionic-data-display.html

<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のようになります。

図7：ChipとIconsの例

　まず、Chipは基本的に、（1）のような小さく簡潔なテキストを表示して、ステータスなどを表すために利用するUIです。color属性に所定の配色を与えて、情報を表現します。そしてさらに、（2）のように<ion-icon>を組み合わせることで、表現力が向上します。

　<ion-icons>は、name属性に表示したいアイコンの名前を指定することで、そのアイコンを表示できるコンポーネントです。ここで利用できるアイコンは「Ionicon（アイオニコン）」と呼ばれており、Ionic Framework以外のプラットフォームでも利用可能なアイコンセットとして、配布されています（図8）。

図8：Ioniconの検索サイト（https://ionic.io/ionicons/）

　（2）ではSuccessという文言に合わせて、丸で囲んだチェックマークを表すcheckmark-circle-outlineというアイコンを選びました。Chip内の文言を表す<ion-label>よりも前に配置すれば左側に、後ろに配置すれば右側にアイコンが現れます。

　次の例として、「List」の<ion-list>と、その要素である「Item」の<ion-item>でリストを作成します。ついでに、「Badge」の<ion-badge>を使って、付加情報の表示も行ってみましょう（リスト5）。

［リスト5］ionic-data-display.html

<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のようになります。

図9：ListとBadgeの例

　リスト表示をしたい場合は、（1）のように、まず一番外側に<ion-list>を配置します。各項目にあたるのが（2）の<ion-item>です。シンプルなケースであれば、<ion-item>の直下にタイトルとなる文字列を直接記述しても問題ありませんが、項目内の表現に一工夫を入れたい場合は、（3）のようにテキストを<ion-label>に入れておきます。

　今回はデータの件数のようなUIを表示したかったので、（4）では<ion-badge>を<ion-label>の後ろに入れています。このように、コンポーネントを組み合わせることでリッチな表示を実現できます。

まとめ

　今回は、Ionic Frameworkの多彩なコンポーネントの一部を解説しました。他にも魅力的なコンポーネントがたくさんあるので、調べてみるとよいでしょう。

　次回は、ReactコンポーネントからWeb Components製のコンポーネントを利用する方法について解説します。お楽しみに。