Breadcrumbs
Breadcrumbs UIパターンをナビゲーションの補助として使用すると、ユーザーがアプリ内での位置を常に確認できます。
Breadcrumbs UIパターンの使用方法
以下のユースケースでは、Breadcrumbs UIパターンを1つの画面に追加します。アプリの複数の画面でBreadcrumbsを表示する場合は、Webブロックにパターンを追加することを推奨します。詳細については、「画面ブロックを作成して再利用する」をご覧ください。
-
Service Studioのツールボックスで
Breadcrumbs
を検索します。Breadcrumbsウィジェットが表示されます。
-
ツールボックスから、Breadcrumbsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Breadcrumbsウィジェットには3つのBreadcrumb Itemウィジェットが含まれています。各Breadcrumb Itemは、パンくずリスト内の位置を表します。必要に応じてBreadcrumb Itemを追加または削除することができます。この例では、Breadcrumb Itemをもう1つ追加しています。
-
ツールボックスから、Breadcrumb ItemをBreadcrumbsパターンにもう1つドラッグします。
-
[Title]プレースホルダにパンくずリストのタイトル(この例では「More Details」)を入力し、[Icon]プレースホルダにIconウィジェットをドラッグします。
-
各Breadcrumb Itemでナビゲーションができるように、リンクを追加します。これを行うには、Breadcrumb Itemのプレースホルダ内のテキストを選択して右クリックし、[Link to]を選択してリンク先を選択します。この例では、More Details Breadcrumb Itemを「More Details」という既存のページへのリンクを作成します。各Breadcrumb Itemでこのプロセスを繰り返します。
-
新しいMore Details Breadcrumb Itemのアイコンを他のBreadcrumb Itemと合わせるため、Iconウィジェットを選択し、[Properties]タブでNameプロパティを「
Entities.IconName.angle_right
」に設定します。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
Breadcrumbs
プロパティ | 説明 |
---|---|
ExtendedClass(Text型): オプション | Breadcrumbs UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
Breadcrumb Item
プロパティ | 説明 |
---|---|
ExtendedClass(Text型): オプション | Breadcrumbs Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|