Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

OutSystems

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]プレースホルダに、PhonesAudioAccessoriesを追加しています。

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

  4. Properties]タブでオプションのプロパティを設定し、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を使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるNavigation Bar UのIスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるNavigation Bar UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
プロパティ 説明
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を使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるNavigation Bar Item UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるNavigation Bar Item UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
プロパティ 説明
IsActive(Boolean型): オプション Trueの場合、ページが描画されたときにNavigation Bar SubItemが選択されます。Falseの場合、Navigation Bar SubItemは選択されません。

デバイスの互換性

Internet Explorerでは、position: fixedposition: stickyの代わりに使用します。後者はサポートされていません。

  • Was this article helpful?