Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

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」に設定します。

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

プロパティ

プロパティ 説明
ExtendedClass(Text型): オプション Breadcrumbs UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるBreadcrumbs UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるBreadcrumbs UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
プロパティ 説明
ExtendedClass(Text型):オプション Breadcrumbs Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるBreadcrumb Item UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるBreadcrumb Item UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?