Navigation Bar
Navigation Bar UIパターンを使用すると、コンテンツを整理し、ユーザーがハイパーリンクを使用してアプリ内を移動できるようにすることができます。エンドユーザーがアプリケーションのメインセクションを移動する必要があり、同時に別のサブセクションも参照できるようにしておく必要がある場合に、このパターンを使用します。
Navigation Bar UIパターンの使用方法
以下のユースケースでは、Navigation Bar UIパターンを1つの画面に追加します。アプリの複数の画面でNavigation Barを表示する場合は、Webブロックにパターンを追加することを推奨します。詳細については、「画面ブロックを作成して再利用する」をご覧ください。
-
Service Studioのツールボックスで
Navigation Bar
を検索します。Navigation Barウィジェットが表示されます。
-
ツールボックスから、Navigation Barウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Navigation BarウィジェットにはNavigation Bar ItemウィジェットとNavigation Bar SubItemウィジェットが含まれています。必要に応じてこれらのウィジェットを追加または削除することができます。
-
必要なコンテンツを[Navigation Bar Item]プレースホルダと[Navigation Bar SubItem]プレースホルダに追加します。
この例では、Navigation Bar Itemの[Title]プレースホルダに、
Phones
、Audio
、Accessories
を追加しています。また、Navigation Bar SubItemの[Content]プレースホルダにリンクを追加しています。各リンクの[Properties]タブで、リンク名、タイトル、リンク先を追加します。
-
[Properties]タブでオプションのプロパティを設定し、Navigation Barのルックアンドフィールを変更することもできます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
Navigation Bar
プロパティ | 説明 |
---|---|
IsFixed(Boolean型): オプション | Trueの場合、ナビゲーションバーは常に画面上の同じ位置に表示されます。これがデフォルト値です。Falseの場合、ナビゲーションバーがページコンテンツとともにスクロールします。 |
TopPosition(Integer型): オプション | ナビゲーションバーを固定するときの上の位置を設定します。 |
MultipleItems (Boolean型): オプション | Trueの場合、複数のNavigation Bar Itemを同時に開くことができます。これがデフォルト値です。Falseの場合、一度に1つのNavigation Bar Itemのみを開くことができます。 |
ExtendedClass(Text型):オプション | Navigation Bar UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
Navigation Bar Item
プロパティ | 説明 |
---|---|
IsActive(Boolean型): オプション | Trueの場合、ページが描画されたときにNavigation Bar Itemが選択されます。Falseの場合、Navigation Bar Itemは選択されません。これがデフォルト値です。 |
IsOpen(Boolean型): オプション | Trueの場合、ページが描画されたときにNavigation Bar Itemが開きます。Falseの場合、Navigation Bar Itemは開きません。これがデフォルトです。 |
ExtendedClass(Text型):オプション | Navigation Bar Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
Navigation Bar SubItem
プロパティ | 説明 |
---|---|
IsActive(Boolean型): オプション | Trueの場合、ページが描画されたときにNavigation Bar SubItemが選択されます。Falseの場合、Navigation Bar SubItemは選択されません。 |
デバイスの互換性
Internet Explorerでは、position: fixed
をposition: sticky
の代わりに使用します。後者はサポートされていません。