Skip to main content

 

 

 

 
Language:

 

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

 

 
 
OutSystems

Timeline

Timeline UIパターンを使用すると、ユーザーの今後、現在、過去のアクティビティなどの関連するイベントを時系列で表示できます。

Timeline UIパターンの使用方法

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

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

  2. ツールボックスから、Timelineウィジェットをアプリケーション画面にドラッグします。

    デフォルトで、TimelineウィジェットにはTimeline Itemウィジェットが含まれ、このTimeline Itemウィジェットには[Icon]、[Date]、[Content]の各プレースホルダが含まれています。必要に応じてTimeline Itemを追加することができます。

  3. 必要なコンテンツを[Icon]、[Date]、[Content]の各プレースホルダに設定します。この例では、テキストを追加しています。

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

プロパティ

Timeline

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

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

Timelineアイテム

プロパティ 説明
Color(Color Identifier型): オプション アイコンの背景色。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - アイコンの背景色がアプリを作成したときに選択した色になります(デフォルト値)。
  • Entities.Color.Red - アイコンの背景色が赤色になります。
ExtendedClass(Text型): オプション Timeline Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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