ウィジェット: モバイルナビゲーションバー

モバイルナビゲーションバーウィジェットを使用すると、ユーザーはタッチ対応デバイス上でトップレベルのページ間を移動することができます。このナビゲーションバーは、携帯電話での利便性を考慮して、モバイルWorkshopアプリケーションの下部に表示されます。ナビゲーションバーには最大4つのアイテムを表示でき、サブメニューを設定して追加のアイテムを表示することができます。

モバイルナビゲーションバーのデザインと動作は、iOSのデザインガイドライン(タブバー)とAndroidのマテリアルデザイン(ボトムナビゲーション)に基づいています。

ナビゲーションバーの設定

ナビゲーションバーを有効にし、設定するには、モジュールがモバイルデバイスタイプに設定されていることを確認し、Workshopモジュールを編集する際に左側のレイアウトとナビゲーションバーを選択します：

右上のモジュールナビゲーションバー表示スイッチを使ってナビゲーションバーを有効にし、ナビゲーションアイテムを追加します。各ナビゲーションアイテムにはラベルとアイコンが含まれます。

通常、ナビゲーションアイテムは、アプリケーション内のページに移動するように設定する必要があります。+ イベントを追加を選択し、ページに切り替えるイベントを選択します。

動作

以下では、モバイルWorkshopアプリケーションにおけるナビゲーションバーの機能の一部を説明します：

• 常に表示。有効にした場合、ナビゲーションバーはユーザーがページ間を移動する際に、モバイルアプリケーションの画面下部に常に表示されます。ナビゲーションバーを隠すフォーカスしたインターフェースを作成するには、全画面を覆うように設定できる引き出しを使用する必要があります。

• スタックナビゲーション。特定のページに移動するようにナビゲーションアイテムを設定すると、そのページがアクティブなときはいつでもナビゲーションバーにそのアイテムがハイライト表示されます。また、ユーザーが別のページに移動すると、ハイライトがアクティブなままになるため、ユーザーはどこから移動したかを把握することができます。

  例えば、最初のナビゲーションアイテムがフライトと呼ばれ、フライトのリストが含まれるフライトリストというページを開くように設定されているとします。リストでフライトが選択されると、アプリケーションはユーザーを選択したフライトの詳細を表示するフライト360という別のページに移動させるとします。

  この場合、ユーザーがフライトリストページからフライト360ページに移動すると、フライトナビゲーションアイテムはナビゲーションバーで引き続きハイライト表示されます。これにより、ユーザーはアプリケーション内での位置を把握し、ナビゲーションバーでフライトを選択することでフライト360ページを終了することができます。

設定オプション

以下は、ナビゲーションバーの主要な設定オプションです：

• アイコン： このモバイルアプリケーションがFoundryの他の部分、例えばFoundry Carbonに埋め込まれたときに表示されるアイコン。
• タイトル： このアプリケーションが開かれたときにブラウザのタブに表示されるべきタイトル。
• 高さ： ナビゲーションバーの高さ（ピクセル単位）。
• メニューテキストを隠す： ナビゲーションバーのアイテムについて、テキストを隠し、アイコンのみを表示します。
• ナビゲーションアイテム： ナビゲーションバーの下部に表示されるべき最大4つのアイテム。各アイテムについて、次のことを設定できます：
  • タイプ： 単一のアイテムはラベルとアイコンを表示し、Workshopのイベントを実行します。サブメニューのアイテムは、ラベルとアイコンを持ち、選択されたときにネストした単一のアイテムのリストを表示します。
  • ラベル： ナビゲーションアイテムに表示されるテキストラベル。画面のスペースが限られているため、ラベルは単語1つまたは短いフレーズにすることをお勧めします。
  • アイコン： ナビゲーションアイテムに表示されるアイコン。
  • イベント： アイテムが選択されたときに実行されるWorkshopのイベント。通常、ナビゲーションアイテムは、Workshopモジュール内のページに移動するように設定されます。