Navigation Bar

Navigation Bar UIパターンを使用すると、コンテンツを整理し、ユーザーがハイパーリンクを使用してアプリ内を移動できるようにすることができます。エンドユーザーがアプリケーションのメインセクションを移動する必要があり、同時に別のサブセクションも参照できるようにしておく必要がある場合に、このパターンを使用します。

Navigation Bar UIパターンの使用方法

以下のユースケースでは、Navigation Bar UIパターンを1つの画面に追加します。アプリの複数の画面でNavigation Barを表示する場合は、Webブロックにパターンを追加することを推奨します。詳細については、「画面ブロックを作成して再利用する」をご覧ください。

1. Service StudioのツールボックスでNavigation Barを検索します。

   Navigation Barウィジェットが表示されます。

   

2. ツールボックスから、Navigation Barウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

   

   デフォルトで、Navigation BarウィジェットにはNavigation Bar ItemウィジェットとNavigation Bar SubItemウィジェットが含まれています。必要に応じてこれらのウィジェットを追加または削除することができます。

3. 必要なコンテンツを［Navigation Bar Item］プレースホルダと［Navigation Bar SubItem］プレースホルダに追加します。

   この例では、Navigation Bar Itemの［Title］プレースホルダに、Phones、Audio、Accessoriesを追加しています。

   

   また、Navigation Bar SubItemの［Content］プレースホルダにリンクを追加しています。各リンクの［Properties］タブで、リンク名、タイトル、リンク先を追加します。

   

4. ［Properties］タブでオプションのプロパティを設定し、Navigation Barのルックアンドフィールを変更することもできます。

   

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。