例

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

• フィーチャ レイヤーには Web サイトへの URL が含まれており、選択したフィーチャに関連付けられた Web サイトを開くリンクとしてボタンを使用するとします。
• アプリには複数のページがあり、ホーム ページ上には各ページにアクセスするためのメニューがあります。また、複数のセクションがあり、ユーザーがそこにすばやく移動できるようにしたいと思っています。ユーザーをホーム ページに戻すボタンや、アプリ内のどこからでも関連するセクションまたはページに進ませるボタンを作成できます。

使用上の注意

ボタン ウィジェットをページに追加すると、ウィジェットの横に [クイック スタイル] ウィンドウが表示されます。ここでは、アプリのテーマに合った設定済みのデザインを選択できます (後で再びこのウィンドウにアクセスするには、ウィジェットのツールバーで [クイック スタイル] ボタン をクリックします)。高度な設定で標準状態とホバー時の状態の色とフォントを選択して、独自のボタン デザインを構成することもできます。

ボタンをデータ ソース (フィーチャ レイヤーなど) に接続すると、そのフィーチャ データはボタンのテキストまたはリンクの URL を入力するために使用できます。

設定

ボタン ウィジェットには以下の設定が含まれます。

• [データに接続] - フィーチャ属性からの URL を使用するなど、ダイナミック リンクを設定できるよう、必要に応じてボタンをデータに接続します。
  • [データの選択] - フィーチャ レイヤーをデータ ソースとして選択します。
• [リンクの設定] - Web アドレスまたはアプリ内のセクション ビューやページを開くようにリンクをボタンに追加します。Web アドレスにリンクする場合、(https:// で始まる) URL を入力します。ボタンをデータ ソースに接続する場合、[属性] または [式] を使用して URL の動的ソースを選択します。 リンクをアプリと同じウィンドウで開くか、トップ ウィンドウで開くか、または新しいウィンドウで開くかを選択できます。
  • [ツールチップ] - ボタンが開くリソースを説明するホバー テキストを指定します。
  • [テキスト] - ボタンに表示されるテキストを指定します。ボタンをデータに接続する場合、データ ソースに基づいてダイナミック テキストを使用するには、[属性]、[統計]、または [式] を選択します。
  • [アイコン] - アイコンをボタンに追加して、ボタン テキストの左側または右側に配置します。[一般] ギャラリーと [矢印] ギャラリーからアイコンを選択するか、ファイルから独自のアイコンを追加できます。
• [高度な設定] - アプリのテーマから継承したフォントと色をオーバーライドして、ボタンの 2 つの状態のスタイルを設定します。[標準] はユーザーの操作がないボタンの状態であり、[ホバー] はボタンをポイントしたまたはクリックしたときにユーザーによって開始されたボタンの状態です。
  • [テキスト] - フォントのサイズ (ピクセル単位) と色を変更し、太字、斜体、取り消し線、および下線の書式設定を使用してボタンのテキストのスタイルを設定します。
  • [背景] - 塗りつぶし色または画像を選択してボタンの背景を設定します。画像を選択した場合、[フィット]、[塗りつぶし]、[中央揃え]、[タイル]、または [ストレッチ] を使用してボタンに配置できます。[フィット] を選択すると、ボタンは画像の周りに背景の塗りつぶし色を表示します。
  • [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択します。
  • [角] - 半径サイズ (ピクセルまたはパーセント) を変更して、ボタンの角を作成します。設定をロックして、4 つの角すべての半径を同期します。
  • [影] - 次の設定を使用してボタンの周囲に影の効果を追加します。
    • [オフセット X] - 影の水平距離を設定します。負の値にするとボタンの左側に影が配置され、正の値にすると右側に配置されます。
    • [オフセット Y] - 影の垂直距離を設定します。負の値にするとボタンの上側に影が配置され、正の値にすると下側に配置されます。
    • [ぼかしの半径] - ぼかし効果を影に追加します。
    • [拡張の半径] - 影のサイズを調整します。
    • [色] - 影の色を選択します。