カード ウィジェット

カード ウィジェットは、柔軟性と拡張性に優れたコンテンツ コンテナーで、関連するさまざまな情報を表示できます。 コンテンツは、テキスト、画像、ボタン、マップなどの異なるウィジェットで構成することができます。 複数の定義済みカード テンプレートから選択するか、空のテンプレートを選択して独自のデザインを作成できます。 カードにリンクを設定してクリックできるようにしたり、デフォルト状態とホバー状態で異なるスタイルを構成したりできます。

例

このウィジェットを使用して、次のようなアプリの設計要件をサポートします。

• ArcGIS マップやフィーチャ サービスのアイテム詳細を集約するなど、1 つの主題に関する関連情報を 1 つの一貫性のあるコンテンツにまとめることができます。
• 簡潔な行動喚起をグループ化して、ユーザーが必要な情報を検索できるようにデータや製品のグループを効果的に表示したり、カードをクリックして簡単にアクセスできるようにすることができます。
• ユーザーがクリックしてアプリの別のページやセクションで詳細を確認できるように、簡単なテキストと画像またはマップで場所の概要を視覚的に表示できます。

使用上の注意

カード ウィジェットを追加するときは、まずテンプレート デザインを選択して、[開始] をクリックします。 キャンバス上で、カードにネストされたウィジェットを選択してコンテンツやレイアウトを変更したり、[挿入] パネルからカードにウィジェットをドラッグして追加したりできます。 カード ウィジェットでは、すべてのウィジェットがサポートされています。

ヒント:

ネストされたウィジェットでコンテナーが埋まる場合は、[アウトライン] ウィンドウでカード ウィジェットを選択して、カード ウィジェットの構成設定を開くことができます。

カード ウィジェットには、[デフォルト] と [ホバー] の 2 つの状態があります。 ホバー状態は、ユーザーがカードにポインターを合わせると表示されます。 ホバー状態は、カードがクリック可能であることを示したり、追加情報を提供したりするのに便利です。 カードで両方の状態を有効にすると、キャンバス上のカード付近に状態ボタンが表示されます。 これらのボタンを使用して、2 つの状態の編集を切り替えることができます。 ネストされたウィジェットを選択すると、[リンク先] ボタン が表示されます。 このボタンは、ウィジェットの設定が分離されているか、2 つの状態が同期しているかを示します。 [リンク先] をクリックした場合、ウィジェットの設定を一方の状態から他方の状態に適用したり、その状態のウィジェットの設定を分離したりできる追加オプションが表示されます。

• 同期されたウィジェットの場合、状態全体でウィジェットのコンテンツとスタイル設定 (背景、枠線、および影) は同じになり、サイズと位置は別々になります。
• 分離されたウィジェットの場合、別の状態にある他のウィジェットに影響することなくプロパティを構成できます。
• 別の状態で同じウィジェットを使用する、またはウィジェットのサイズと位置も同期するには、ウィジェットを選択して、それをターゲット状態に適用します。
• 最初にウィジェットを分離していない場合は、同期されているウィジェットを削除すると、別の状態にある同じウィジェットも削除されます。

設定

カード ウィジェットには次の設定があります。

• [テンプレートの選択] - あらかじめ定義されたカード デザインを選択するか、空のカード テンプレートから始めます。 (テンプレートを選択した場合、表示設定は後からカスタマイズできます)。
• [リンクの設定] - Web アドレスまたはアプリ内のセクション ビュー、ウィンドウ、またはページなどのその他のコンテンツに移動するようにリンクをカードに追加します。Web アドレスにリンクする場合、(https:// で始まる) URL を入力します。 [URL] オプションを使用して、Web アドレスの他に電子メール アドレスや電話番号などへのリンクを設定できます。 リンクをアプリと同じウィンドウで開くか、トップ ウィンドウで開くか、または新しいウィンドウで開くかを選択できます。
• [状態] - さまざまな色、スタイル、およびコンテンツを使用してカードのステータスを伝える視覚的な表現を提供します。
  • [デフォルト] - ユーザーの操作がないカードのデフォルトの状態。 この状態には、背景、枠線、およびボックスの影のスタイルを設定できます。
  • [ホバー] - ユーザーがカードをポイントしたときに始まる状態。 この状態はオプションです。 ホバー状態をオンにすると、デザイン (ウィジェットのレイアウトとコンテンツを含む) を分離できます。 この状態には、背景、枠線、ボックスの影、アニメーション化されたトランジションのスタイルを設定できます。
    • [レイアウト] - ホバー状態のレイアウトを設計するためのモードを選択します。
      • [自動] - ネストされたウィジェットの設定が、デフォルト状態とホバー状態の間で同期されます。 このモードを選択した場合、ネストされたウィジェットの設定は、キャンバス上で [デフォルト] 状態を編集しているときにのみ構成できます。 このモードは、デフォルト状態とホバー状態の間で、背景や枠線の設定など、カードのコンテンツ設定のみを変更する場合に適しています。
      • [カスタム] - カードのホバー状態に別のレイアウトを作成します。 このモードを選択した場合、両方の状態を編集しているときに、ウィジェットを手動で配置および構成できます。 一方の状態のレイアウトに追加したウィジェットは、他方の状態には自動的には表示されません。ただし、[リンク先] ボタン を使用して、両方の状態間でウィジェットを同期することができます。