ビュー ナビゲーション ウィジェットを使用すると、セクション ウィジェット内のビューに対話形式でアクセスできます。 ユーザーがセクション内のビューにアクセスすると、ページ全体の代わりにセクション内のコンテンツだけが更新されるため、アプリのパフォーマンスが向上します。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- セクション ウィジェットに含まれる類似するコンテンツの複数のビューを作成して、アプリでのスクロールを減らします。ビュー ナビゲーション ウィジェットを含めると、ユーザーはタブまたはボタンをクリックするか、スライダーをドラッグしてセクションのコンテンツを更新し、ビューにアクセスできるようになります。
使用上の注意
ビュー ナビゲーション ウィジェットをリンクするセクション ウィジェットをページに含める必要があります。 そのウィジェットはセクションの外側に配置する必要があります。対応するセクション ウィジェット内でビュー ナビゲーション ウィジェットをネストすることはできません。 たとえば、ウィジェットをセクションの上側または下側に配置 (水平タブに最適) するか、セクションの左側または右側に配置 (垂直タブに最適) します。
ビュー ナビゲーション ウィジェットを追加すると、ウィジェットの横に [クイック スタイル] ウィンドウが表示されます。ここでは、タブ、シンボル、スライダー、ナビゲーション ボタンを含むさまざまなスタイルを選択できます。 (後で再びこのウィンドウにアクセスするには、ウィジェットのツールバーで [クイック スタイル] ボタン 
をクリックします)。高度な設定でウィジェットのさまざまな状態の色とフォントを選択して、独自のデザインを構成することもできます。
タブとシンボルのスタイルでは、セクションのすべてのビューまたは特定のビューを対象に指定できます。 ビューの順序を指定するには、セクション ウィジェットの構成パネルを開き、ビュー ナビゲーション ウィジェットに表示したい順番にビューをドラッグします。 また、ビューの名前はセクション ウィジェットで編集できます。
設定
ビュー ナビゲーション ウィジェットには以下の設定が含まれます。
- [リンク先] - ページからセクション ウィジェットを選択します。
選択したスタイルに応じて、さまざまな設定を構成できます。
タブ スタイル (デフォルト、下線、ピル) では、次の設定を構成できます。
- [ビュー] - 次のいずれかのオプションを選択して、ウィジェットに表示するビューを指定します。
- [自動] - セクション内のすべてのビューのタブを含めます。
- [カスタム] - セクション内の特定のビューのタブを含めます。
- [方向] - タブを横向きまたは縦向きに表示します。
- [間隔] - タブ間の間隔を指定します (ピクセル単位)。
- [整列] - タブ テキストの配置を指定します。 たとえば、水平方向のピル スタイルを選択した場合、タブ名はそのタブに合わせられます (左端、右端、または中央)。
- [高度な設定] - アプリのテーマをオーバーライドして、ウィジェットの背景色を変更し、タブの 3 つの状態をスタイル設定することで、タブにポインターを合わせたとき、またはタブを選択したときにユーザーにビジュアル キューを提供できます。 [標準] はユーザーの操作がないタブの状態を表します。[選択] はユーザーがタブを選択した状態を表し、リンクされたセクション ウィジェットに対応するビューが表示されます。[ホバー] はユーザーがタブをポイントしたときの状態を表します。
ヒント:
このオプションを試すには、ビルダー ツールバーの [ライブ ビュー] をクリックします。
- [テキスト] - フォントのサイズ (ピクセル単位) と色を変更し、太字、斜体、取り消し線、および下線の書式設定を使用してタブのスタイルを設定します。
- [背景] - タブの塗りつぶし色を選択します。
- [枠線] または [下線] - タブの枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択します。 [タブの下線] スタイルでは、ラインの色と幅のみを選択できます。
- [枠線の半径] - 半径サイズ (ピクセルまたはパーセント) を変更して、タブの角を作成します。
[シンボル] スタイルでは、次の設定を構成できます。
- [ビュー] - 次のいずれかのオプションを選択して、ウィジェットに表示するビューを指定します。
- [自動] - セクション内のすべてのビューのシンボルを含めます。
- [カスタム] - セクション内の特定のビューのシンボルを含めます。
- [方向] - シンボルを横向きまたは縦向きに表示します。
- [間隔] - シンボル間の間隔を指定します (ピクセル単位)。
- [整列] - ウィジェット内のシンボルの配置を指定します。 たとえば、垂直方向を選択した場合、シンボルはそのウィジェット コンテナーに合わせられます (左端、右端、または中央)。
- [ツールチップ] - ビューの名前を表示するホバー テキストを有効にします。
- [シンボル] - 現在のビューと他のビューのアイコンを選択します。
- [高度な設定] - アプリのテーマをオーバーライドして、ウィジェットの背景色と、ビュー ナビゲーション シンボルの 3 つの状態 ([標準]、[選択]、および [ホバー]) のアイコン サイズ (ピクセル単位) および色を変更します。
[スライダー] スタイルでは、次の設定を構成できます。
- [サム ハンドル] - スライダーにハンドル (またはノブ) を追加して、トラックに沿って進捗状況を表示します。
- [高度な設定] - アプリのテーマをオーバーライドして、ウィジェットの背景色と、スライダーの以下の 3 つの状態の色を変更します。
- [アクティブ] - スライダー トラックの完了した部分。
- [サム] - スライダー トラックのサム ハンドル (またはノブ)。 サムの塗りつぶしと枠線の色を選択できます。
- [非アクティブ] - スライダー トラックの未完了部分。
矢印スタイルでは、次の設定を構成できます。
- [方向] - ナビゲーション ボタンとテキストを横方向または縦方向に表示します。
- [ステップ] - ナビゲーション ボタンをクリックするたびに、セクションが前後に移動する量を定義します。 デフォルト値は 1 で、入力できる値の範囲は 0 ～ 1 です。 効果を表示するには、対応するセクション ウィジェットのトランジション アニメーションを設定します。
- [前へ] と [次へ] - テキストを入力し、ナビゲーション ボタンのアイコンを選択します。
- [高度な設定] - アプリのテーマをオーバーライドして、ウィジェットの背景色を変更し、ナビゲーション ボタンの 3 つの状態 ([標準]、[ホバー]、[無効]) をスタイル設定します。ここで、[標準] はユーザーの操作がないボタンの状態、[ホバー] はユーザーがボタンをポイントしたときの状態、[無効] は次または前のビューが存在せず、ボタンをクリックできないときの状態を表します。
- [テキスト] - ナビゲーション ボタンのテキストのフォント サイズ (ピクセル単位)、色、およびスタイルを選択します。
- [アイコン] - ナビゲーション ボタンのサイズ (ピクセル単位) と色を変更します。
- [背景] - ナビゲーション ボタンの塗りつぶし色を選択します。
- [枠線] - ボタンの枠線の色、スタイル、および幅 (ピクセル単位) を選択します。
- [枠線の半径] - 半径サイズ (ピクセルまたはパーセント) を変更して、ナビゲーション ボタンの角を丸めます。