カード ウィジェットは、柔軟性と拡張性に優れたコンテンツ コンテナーで、関連するさまざまな情報を表示できます。 コンテンツは、テキスト、画像、ボタン、マップなどの異なるウィジェットで構成することができます。 複数の定義済みカード テンプレートから選択するか、空のテンプレートを選択して独自のデザインを作成できます。 カードにリンクを設定してクリックできるようにしたり、デフォルト状態とホバー状態で異なるスタイルを構成したりできます。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- ArcGIS マップやフィーチャ サービスのアイテム詳細を集約するなど、1 つの主題に関する関連情報を 1 つの一貫性のあるコンテンツにまとめることができます。
- 簡潔な行動喚起をグループ化して、ユーザーが必要な情報を検索できるようにデータや製品のグループを効果的に表示したり、カードをクリックして簡単にアクセスできるようにすることができます。
- ユーザーがクリックしてアプリの別のページやセクションで詳細を確認できるように、簡単なテキストと画像またはマップで場所の概要を視覚的に表示できます。
使用上の注意
カード ウィジェットを追加するときは、まずテンプレート デザインを選択して、[開始] をクリックします。 キャンバス上で、カードにネストされたウィジェットを選択してコンテンツやレイアウトを変更したり、[挿入] パネルからカードにウィジェットをドラッグして追加したりできます。 カード ウィジェットでは、すべてのウィジェットがサポートされています。
ヒント:
ネストされたウィジェットでコンテナーが埋まる場合は、[アウトライン] ウィンドウでカード ウィジェットを選択して、カード ウィジェットの構成設定を開くことができます。
カードをリンクとして構成する場合、カードの外観には 2 つの状態 ([デフォルト] および [ホバー]) があります。 ホバー スタイルをデザインしてカードがクリックできることを示したり、ホバー ステータスに異なるコンテンツを定義して同じカードでその他の情報をユーザーに表示したりできます。 カードで両方の状態を有効にすると、キャンバス上のカード付近に状態ボタンが表示され、切り替えて詳細なデザインを行うことができます。 ネストされたウィジェットを選択すると、[リンク先] ボタン 
が表示されます。 このボタンは、ウィジェットの設定が分離されているか、状態全体で同期しているかを示します。
- 同期されたウィジェットの場合、状態全体でウィジェットのコンテンツとスタイル設定 (背景、枠線、および影) は同じになり、サイズと位置は別々になります。
- 分離されたウィジェットの場合、別の状態にある他のウィジェットに影響することなくプロパティを構成できます。
- 別の状態で同じウィジェットを使用する、またはウィジェットのサイズと位置も同期するには、ウィジェットを選択して、それをターゲット状態に適用します。
- 最初にウィジェットを分離していない場合は、同期されているウィジェットを削除すると、別の状態にある同じウィジェットも削除されます。
設定
カード ウィジェットには次の設定があります。
- [テンプレートの選択] - あらかじめ定義されたカード デザインを選択するか、空のカード テンプレートから始めます。 (テンプレートを選択した場合、表示設定は後からカスタマイズできます)。
- [リンクの設定] - Web アドレスまたはアプリ内のセクション ビュー、ウィンドウ、またはページなどのその他のコンテンツに移動するようにリンクをカードに追加します。Web アドレスにリンクする場合、(https:// で始まる) URL を入力します。 [URL] オプションを使用して、Web アドレスの他に電子メール アドレスや電話番号などへのリンクを設定できます。 リンクをアプリと同じウィンドウで開くか、トップ ウィンドウで開くか、または新しいウィンドウで開くかを選択できます。
- [状態] - さまざまな色、スタイル、およびコンテンツを使用してカードのステータスを伝える視覚的な表現を提供します。
- [デフォルト] - ユーザーの操作がないカードのデフォルトの状態。 この状態には、背景、枠線、およびボックスの影のスタイルを設定できます。
- [ホバー] - ユーザーがカードをポイントしたときに始まる状態。 この状態はオプションです。 ホバー状態をオンにすると、デザイン (ウィジェットのレイアウトとコンテンツを含む) を分離できます。 この状態には、背景、枠線、ボックスの影、アニメーション化されたトランジションのスタイルを設定できます。
ヒント:
このオプションを試すには、ビルダー ツールバーの [ライブ ビュー] をクリックします。