# ボタン

## ボタンの設定

Adaloに配置する各ボタンには、テキストと/またはアイコンをオプションで設定できます。必要に応じてアイコンを削除したり、使用ケースに適したアイコンを選択したりできます。同様に、ボタンからすべてのテキストを削除すると、アイコンが中央に配置されるため、アイコンのみのボタンを作成できます。

ボタンにクリックアクションを追加して、機能を実行するようにしてください。ボタンは、新しい画面へのリンク、レコードの更新、カスタムアクションの実行などに使用できます。

### ボタンのスタイル

ボタンは完全にカスタマイズ可能であり、アプリの独自のビジュアルテーマに合わせてスタイルを設定できます。テキスト、アウトライン、コンテインド、カスタムの4種類のボタンがあります。以下にそれぞれの例を示します。カスタムはボタンのすべての側面を制御する最大の自由度を提供します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-1401776f2528c2560f4074715a90d278d1fb5e58%2FScreenshot%202024-07-15%20at%209.57.53%E2%80%AFAM.png?alt=media" alt=""><figcaption><p>ボタンのスタイル</p></figcaption></figure>

テキストやアイコンのサイズを設定したり、影を追加したり、角丸や不透明度を変更したり、ホバーエフェクトを有効にしたり、自動大文字テキストを有効/無効にしたりすることもできます。ホバーエフェクトは、選択した色に基づいて自動的に適用されます。エフェクトを有効または無効にする以外には、エフェクトをカスタマイズすることはできません。ホバーエフェクトは、Web上のデスクトップデバイスで表示される場合にのみボタンに適用されます。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-02cdb81b761b79e9e49f756d190f3131ffbbcd86%2FScreenshot%202024-07-15%20at%2011.51.48%E2%80%AFAM.png?alt=media" alt=""><figcaption><p>ボタンのテキストサイズオプション</p></figcaption></figure>

## 追加のボタン状態の設定

さまざまなシナリオに基づいて異なるボタンを表示するために、追加の状態1および/または追加の状態2を有効にしてください。 各状態が表示されるタイミングを理解することが重要です。以下は、それがどのように機能するかの詳細です。

* 「ボタン」アコーディオン内の設定はデフォルトで表示されます。
* 追加の状態1は、ユーザーが画面を表示するときに設定したロジックがTrueに評価される場合、デフォルトのボタンスタイルを上書きします。
* 追加の状態2は、ユーザーが画面を表示するときに設定したロジックがTrueに評価される場合、デフォルトの状態と追加の状態1の両方を上書きします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-f42b43a3b66d9f7188a3a4eb86ee083c79711ed4%2FScreenshot%202024-07-15%20at%2010.34.18%E2%80%AFAM.png?alt=media" alt=""><figcaption><p>ボタンには3つのユニークな状態があります</p></figcaption></figure>

例を見てみましょう。以下に、デフォルトの状態、クラスが満員の場合の追加状態、およびユーザーが既にクラスに登録されている場合の追加状態があります。この場合、クラスが満員でユーザーが登録されている場合、「登録済み」の状態が表示されます。これは、追加の状態2にあるため、追加の状態1を上書きします。
