ボタン ウィジェットは、アプリ内のページ、ウィンドウ、およびセクション ビューを開くリンク、特定のブロックやページの上部までスクロールするリンク、または Web アドレスに移動するリンクを提供します。 データ ソースを使用して、(マップやリストなどに含まれる) フィーチャの選択に基づいて変化するテキストまたはリンクの動的なボタンを提供できます。 さまざまなスタイル、サイズ、および色を選択してボタンをデザインできます。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- フィーチャ レイヤーには Web サイトへの URL が含まれており、選択したフィーチャに関連付けられた Web サイトを開くリンクとしてボタンを使用するとします。
- アプリには複数のページがあり、ホーム ページ上には各ページにアクセスするためのメニューがあります。 また、複数のセクションがあり、ユーザーがそこにすばやく移動できるようにしたいと思っています。 ユーザーをホーム ページに戻すボタンや、アプリ内のどこからでも関連するセクションまたはページに進ませるボタンを作成できます。
使用上の注意
ボタン ウィジェットをページに追加すると、ウィジェットの横に [クイック スタイル] ウィンドウが表示されます。ここでは、アプリのテーマに合った設定済みのデザインを選択できます (後で再びこのウィンドウにアクセスするには、ウィジェットのツールバーで [クイック スタイル] ボタン 
をクリックします)。高度な設定でデフォルト状態とホバー状態の色とフォントを選択して、ボタン デザインを構成することもできます。
ボタンをデータ ソース (フィーチャ レイヤーなど) に接続すると、そのフィーチャ データはボタンのテキストまたはリンクの URL を入力するために使用できます。
ヒント:
スクロール ページでウィジェットを表示したままにするには、ボタン ウィジェットのツールバーの [ピン] ボタンをクリックします。
設定
ボタン ウィジェットには以下の設定が含まれます。
- [データに接続] - フィーチャ属性からの URL を使用するなど、ダイナミック リンクを設定できるよう、必要に応じてボタンをデータに接続します。
- [データの選択] - フィーチャ レイヤーをデータ ソースとして選択します。
- [リンクの設定] - アプリ内のページ、ウィンドウ、およびセクション ビューを開くボタン、特定のブロックやページの上部までスクロールするボタン、または Web アドレスに移動するボタンにリンクを追加します。 Web アドレスにリンクする場合、(https:// で始まる) URL を入力します。 [URL] オプションを使用して、Web アドレスの他に電子メール アドレスや電話番号などへのリンクを設定できます。 ボタンをデータ ソースに接続する場合、[属性] または [式] を使用して URL の動的ソースを選択します。 リンクをアプリと同じウィンドウで開くか、トップ ウィンドウで開くか、または新しいウィンドウで開くかを選択できます。
- [ツールチップ] - ボタンが開くリソースを説明するホバー テキストを指定します。
- [テキスト] - ボタンに表示されるテキストを指定します。 ボタンをデータに接続する場合、データ ソースに基づいてダイナミック テキストを使用するには、[属性]、[統計]、または [式] を選択します。
- [アイコン] - アイコンをボタンに追加して、ボタン テキストの左側または右側に配置します。 [一般] ギャラリーと [矢印] ギャラリーからアイコンを選択するか、ファイルから独自のアイコンを追加できます。 [削除] ボタンをクリックして、未使用のアップロード済みアイコンを削除します。
注意:
次の画像形式をアップロードできます: PNG、GIF、JPG、JPEG、BMP。 最適なパフォーマンを維持するために、1 回のアップロードに対して 10MB のサイズ制限が設けられています。
- [高度な設定] - アプリのテーマから継承したフォントと色をオーバーライドして、ボタンの 2 つの状態のスタイルを設定します。[デフォルト] はユーザーの操作がないボタンの状態であり、[ホバー] はボタンをポイントしたまたはクリックしたときにユーザーによって開始されたボタンの状態です。
- [テキスト] - フォントのサイズ (ピクセル単位) と色を変更し、太字、斜体、取り消し線、および下線の書式設定を使用してボタンのテキストのスタイルを設定します。
- [背景] - 塗りつぶし色または画像を選択してボタンの背景を設定します。 画像を選択した場合、[フィット]、[塗りつぶし]、[中央揃え]、[タイル]、または [ストレッチ] を使用してボタンに配置できます。 [フィット] を選択すると、ボタンは画像の周りに背景の塗りつぶし色を表示します。
- [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択します。
- [角] - 半径サイズ (ピクセルまたはパーセント) を変更して、ボタンの角を作成します。 設定をロックして、4 つの角すべての半径を同期します。
- [影] - 次の設定を使用してボタンの周囲に影の効果を追加します。
- [オフセット X] - 影の水平距離を設定します。 負の値にするとボタンの左側に影が配置され、正の値にすると右側に配置されます。
- [オフセット Y] - 影の垂直距離を設定します。 負の値にするとボタンの上側に影が配置され、正の値にすると下側に配置されます。
- [ぼかしの半径] - ぼかし効果を影に追加します。
- [拡張の半径] - 影のサイズを調整します。
- [色] - 影の色を選択します。
操作オプション
ボタン ウィジェットを使用して、他のウィジェットを開閉することができます。
これには、ボタン ウィジェットの設定の [アクション] タブで、[トリガーの追加] をクリックします。 [ボタンをクリック] トリガーを選択してから、ターゲット ウィジェットとアクションを選択します。 現在のところ、次に示すその他のウィジェットにボタン ウィジェットを接続することができます。
| ターゲット | アクション |
|---|---|
[サイドバーの切り替え] - サイドバーを開いたり閉じたりします。 | |
[ウィジェットを開く] - コントローラーでウィジェットを開きます。 |