# クラス詳細スクリーン

クラス詳細画面は、カテゴリ内の選択されたクラスに関するすべての情報を表示するためのものです。このページには、Magic Textを介してデータベースから情報を取得するいくつかのコンポーネントが含まれています。クラスコレクション内のプロパティに情報が含まれていない場合、この画面では正しく表示されません。

いくつかのコンポーネントは、「カテゴリリスト」および「クラスリスト」画面のドキュメントで説明されたコンポーネントと同じ方法で機能するため、以下で新しいコンポーネントについて説明します。

## コンポーネント

### **ボタンコンポーネント — Rectangle 38**

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-755a09e5694e64d918d0f36e437be576e82ac730%2Fclassesdetailsbutton.png?alt=media" alt="" width="302"><figcaption></figcaption></figure>

この長方形コンポーネントは、この画面上のボタンのように機能します。表示されるかどうかを制御する可視性ルールが含まれています。この場合、現在のクラス > 利用可能な空きスポットが0より大きい場合にボタンが表示されます。つまり、クラスに空きがある場合、ボタンが表示されます。

⚡ **ボタンアクション**

ボタンには、「購入」画面に移動するリンクアクションが含まれています。

### マップコンポーネント

マップコンポーネントは、コンポーネントマーケットプレースにあるか、「インストールされたチーム」セクションのコンポーネント左パネルに表示されます。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-b24ddaf3f6bfd9170be97e0f0cfd32c29bb9349c%2Fclassesdetailsmap.png?alt=media" alt=""><figcaption></figcaption></figure>

このコンポーネントには[Google Maps APIキー](https://help.adalo.com/component-basics/marketplace-components/maps?_gl=1*x54t8i*_ga*MTExMTM3MTY4NC4xNTg1NTk0NDU1*_ga_SWT45DV35L*MTY5MzQyNDMwNS44Ni4wLjE2OTM0MjQzMDUuNjAuMC4w#1-setup-your-google-api-key)が必要で、クラスの場所を表示します。Googleマップコンポーネントにはさまざまなカスタマイズが可能です。

地図上に表示される場所は、クラスコレクション内の場所プロパティに基づいています。

{% hint style="danger" %}
マップコンポーネントを利用するには、Google Maps APIキーが必要です
{% endhint %}

### 条件付き表示要素

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-9fd1dcb20372c5527576c596af9f321163269cc1%2Fclassesdetailsvisibility.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

ユーザーにとって、要素のうちの1つだけが表示されます — 両方とも表示されることはありません。表示される要素は、「利用可能な空きスポット」プロパティからの空きスポットの有無に基づく可視性ルールに関連付けられています。

{% hint style="info" %}
見た目では、1つのグループが間違った場所に表示されるように見えるかもしれませんが — 可視性ルールが使用されると、消えるコンポーネントは、元々表示されていたグループが占めていた領域を埋めるように移動します。
{% endhint %}