Breadcrumbs

Breadcrumbs UIパターンをナビゲーションの補助として使用すると、ユーザーがアプリ内での位置を常に確認できます。

Breadcrumbs UIパターンの使用方法

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

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

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

   

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

   

   デフォルトで、Breadcrumbsウィジェットには3つのBreadcrumb Itemウィジェットが含まれています。各Breadcrumb Itemは、パンくずリスト内の位置を表します。必要に応じてBreadcrumb Itemを追加または削除することができます。この例では、Breadcrumb Itemをもう1つ追加しています。

   

3. ツールボックスから、Breadcrumb ItemをBreadcrumbsパターンにもう1つドラッグします。

   

4. ［Title］プレースホルダにパンくずリストのタイトル（この例では「More Details」）を入力し、［Icon］プレースホルダにIconウィジェットをドラッグします。

   

5. 各Breadcrumb Itemでナビゲーションができるように、リンクを追加します。これを行うには、Breadcrumb Itemのプレースホルダ内のテキストを選択して右クリックし、［Link to］を選択してリンク先を選択します。この例では、More Details Breadcrumb Itemを「More Details」という既存のページへのリンクを作成します。各Breadcrumb Itemでこのプロセスを繰り返します。

   

6. 新しいMore Details Breadcrumb Itemのアイコンを他のBreadcrumb Itemと合わせるため、Iconウィジェットを選択し、［Properties］タブでNameプロパティを「Entities.IconName.angle_right」に設定します。

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