Timeline
関連するイベントを時系列で表示します。
Timelineは、エンドユーザーの今後、現在、過去のアクティビティなどの関連するイベントを時系列で表示するために使用します。
使用方法
-
Timelineパターンをプレビューにドラッグします。
-
コンテンツをプレースホルダで設定します。デフォルトでは、パターンの［Icon］プレースホルダに円形のアイコンがあります。これを変更するには、Iconウィジェットをこのプレースホルダにドラッグします。
-
必要な数のTimelineItemをドラッグします。
入力パラメータ
Timeline
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。Text | False | なし |
Timelineアイテム
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| Color | アイコンの背景色。 | Color Identifier | False | Entities.Color.Primary |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。Text | False | なし |
レイアウトおよびクラス
高度なユースケース
ListRecordsを持つTimelineを使用する
- Timelineパターンをプレビューにドラッグします。
- ［Content］プレースホルダに、ListRecordsウィジェットをドラッグします。
- ListRecordsウィジェットに、TimelineItemをドラッグします。
- TimelineItemで、Expressionを使用して必要なデータベースコンテンツを表示します。
-
最後のTimelineItemの縦線を無効にするには、アプリケーションのテーマに以下のCSSコードを記述します。
css .ListRecords .timeline-item:last-of-type .timeline-item-separator { display: none; }1. ListRecordsウィジェットで、要素間の余分なマージンを避けるためにLine Separatorを「None」に設定します。 -
パブリッシュしてテストします。
