Skip to main content

 

パターン

 

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

 

OutSystems

Timeline

関連するイベントを時系列で表示します。

Timelineは、エンドユーザーの今後、現在、過去のアクティビティなどの関連するイベントを時系列で表示するために使用します。

使用方法

1.Timelineパターンをプレビューにドラッグします。

![](images/timeline-image-2.png?width=500)

1.コンテンツをプレースホルダで設定します。デフォルトでは、パターンの[Icon]プレースホルダに円形のアイコンがあります。これを変更するには、Iconウィジェットをこのプレースホルダにドラッグします。

![](<images/timeline-image-3.png>)

1.必要な数のTimelineItemをドラッグします。

入力パラメータ

Timeline

入力名 説明 必須 デフォルト値
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

Timelineアイテム

入力名 説明 必須 デフォルト値
Color アイコンの背景色。 Color Identifier False Entities.Color.Primary
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

高度なユースケース

ListRecordsを持つTimelineを使用する

1.Timelineパターンをプレビューにドラッグします。 1.[Content]プレースホルダに、ListRecordsウィジェットをドラッグします。 1.ListRecordsウィジェットに、TimelineItemをドラッグします。 1.TimelineItemで、Expressionを使用して必要なデータベースコンテンツを表示します。 1.最後のTimelineItemの縦線を無効にするには、アプリケーションのテーマに以下のCSSコードを記述します。

```css
.ListRecords .timeline-item:last-of-type .timeline-item-separator {
    display: none;
}
```

1.ListRecordsウィジェットで、要素間の余分なマージンを避けるためにLine Separatorを「None」に設定します。

1.パブリッシュしてテストします。

![](<images/timeline-image-4.png>)
  • Was this article helpful?