syncfusion-javascript-timeline

Syncfusion TypeScript Timeline の実装

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• アイテムを時系列または順序に沿って表示する
• タイムライン、マイルストーン、イベントの進行状況を視覚化する
• ワークフローのステップやプロセスフローを表示する
• ステータス追跡用の表示を作成する（注文の追跡、プロジェクトのマイルストーン、キャリアパス）
• Before、After、Alternate、Reverse の配置でコンテンツを整理する
• ドット、コネクター、スタイルを使用してタイムラインの外観をカスタマイズする
• ライフサイクルやレンダリングのコールバックなど、タイムラインのイベントを処理する
• タイムラインのレイアウトに横向きまたは縦向きの配置を使用する

Timeline コントロールの概要

Syncfusion TypeScript Timeline コントロールは、コンテンツアイテムを順序または時系列に沿ったレイアウトで表示します。次の機能をサポートしています。

• 複数の配置： Before、After、Alternate、AlternateReverse
• 向き： 横向きと縦向きのレイアウト
• リッチコンテンツ： 文字列コンテンツ、テンプレート化されたコンテンツ、または反対側のコンテンツ
• カスタマイズ： ドットのスタイル設定、コネクターのカスタマイズ、CSS クラス
• イベント： Created、beforeItemRender のライフサイクルイベント
• 逆順モード： アイテムを逆順で表示
• 高度なテンプレート： アイテムの外観を完全に制御

クイックスタートガイド

基本的なタイムラインの作成

import { Timeline } from '@syncfusion/ej2-layouts';

// Create timeline items
let timeline: Timeline = new Timeline({
  items: [{}, {}, {}, {}]
});

// Render to DOM element
timeline.appendTo("#timeline");

コンテンツ付きのタイムライン

import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

const items: TimelineItemModel[] = [
  { content: 'Item 1' },
  { content: 'Item 2' },
  { content: 'Item 3' }
];

let timeline: Timeline = new Timeline({
  items: items,
  orientation: 'Vertical'
});

timeline.appendTo("#timeline");

基本概念

主なプロパティ

• items - タイムラインアイテムを定義する TimelineItemModel オブジェクトの配列
• orientation - 表示方向：Vertical（デフォルト）または Horizontal
• align - コンテンツの配置：Before、After、Alternate、AlternateReverse
• reverse - アイテムを逆順で表示するかどうかを指定するブール値
• template - アイテムのレンダリングをカスタマイズする HTML テンプレートセレクター
• cssClass - タイムラインコンテナーのスタイル設定に使用するカスタム CSS クラス
• created - タイムラインのレンダリング完了時に発生するイベント
• beforeItemRender - 各アイテムのレンダリング前に発生するイベント

TimelineItemModel のプロパティ

• content - メインコンテンツ（文字列またはテンプレートセレクター）
• oppositeContent - 反対側のコンテンツ（文字列またはテンプレートセレクター）
• dotCss - ドットのカスタマイズに使用する CSS クラス
• cssClass - 個々のアイテムのスタイル設定に使用する CSS クラス
• disabled - 特定のアイテムを無効にするかどうかを指定するブール値

ドキュメントとナビゲーションガイド

はじめにとセットアップ

📄 参照： references/getting-started.md

• パッケージのインストールと依存関係
• 開発環境のセットアップ
• CSS スタイルのインポートとテーマ設定
• 基本的なタイムラインの作成と初期化
• 最初に動作するサンプル

アイテム、コンテンツ、反対側のコンテンツ

📄 参照： references/items-and-content.md

• アイテムへの文字列コンテンツの追加
• セレクターを使用したテンプレート化コンテンツ
• oppositeContent プロパティの設定
• 特定のタイムラインアイテムの無効化
• アイテムへのカスタム CSS クラスの設定
• dotCss プロパティを使用したドットのカスタマイズ

配置と向きのモード

📄 参照： references/alignment-and-orientation.md

• Before 配置（コンテンツの位置）
• After 配置（コンテンツの位置を反転）
• Alternate 配置（交互の配置）
• AlternateReverse 配置（交互の配置を逆順にする）
• 縦向き（デフォルト、縦に積み重ねて表示）
• 横向き（横に並べて表示）
• レイアウトの組み合わせと使用例

カスタマイズとスタイル設定

📄 参照： references/customization-styling.md

• 共通のコネクタのスタイル設定（すべてのコネクター）
• 個別のコネクターのスタイル設定（アイテムごとのスタイル設定）
• ドットの色のカスタマイズ
• CSS 変数を使用したドットのサイズ調整
• ドットの境界線とアウトラインのスタイル設定
• カスタマイズ用の CSS セレクターのパターン
• 高度なスタイル設定の手法

テンプレートとカスタムレンダリング

📄 お読みください： references/templating.md

• Template プロパティとテンプレートセレクター
• テンプレートコンテキスト（item、itemIndex）
• 高度な HTML テンプレートの使用方法
• テンプレート内でのドットのカスタマイズ
• 進捗ラインのスタイル設定
• テンプレートのベストプラクティスとパターン

イベントとライフサイクルフック

📄 お読みください： references/events-and-lifecycle.md

• Created イベント（レンダリング完了時にトリガー）
• beforeItemRender イベント（各項目のレンダリング前にトリガー）
• イベント処理用の TimelineRenderingEventArgs
• 初期化とカスタマイズのためのイベントの使用
• イベントコールバックのパターン

逆レイアウトモード

📄 お読みください： references/reverse-layout.md

• 項目の順序を逆にする Reverse プロパティ
• 逆順表示のユースケース
• 配置を変えた場合の逆順表示
• 方向との組み合わせ

API リファレンス全編

📄 お読みください： references/api-reference.md

• プロパティとデフォルト値 - Timeline の9つのプロパティすべての型とデフォルト値
• メソッド - Timeline の7つのメソッドすべて（addEventListener、appendTo、dataBind など）
• イベントと引数 - TimelineRenderingEventArgs を含む beforeItemRender イベントと created イベント
• 項目の設定 - TimelineItemModel の5つのプロパティすべて
• 列挙型 - TimelineAlign と TimelineOrientation の値
• クイックセットアップ例 - 動作する完全な設定

よくあるパターン

ステータス追跡タイムライン

カスタムスタイルでステータスの更新を順番に表示します：

const status = [
  { content: 'Ordered', cssClass: 'state-completed' },
  { content: 'Shipped', cssClass: 'state-progress' },
  { content: 'Delivered' }
];

let timeline: Timeline = new Timeline({
  items: status,
  cssClass: 'status-timeline'
});

デュアルコンテンツタイムライン

メインコンテンツと反対側のコンテキスト情報を表示します：

const events = [
  { content: 'Day 1, 4:00 PM', oppositeContent: 'Check-in' },
  { content: 'Day 1, 7:00 PM', oppositeContent: 'Dinner' }
];

let timeline: Timeline = new Timeline({
  items: events,
  align: 'Alternate',
  orientation: 'Vertical'
});

水平マイルストーンタイムライン

プロジェクトのマイルストーンを横方向に表示します：

let timeline: Timeline = new Timeline({
  items: milestones,
  orientation: 'Horizontal',
  align: 'Before'
});

セットアップ要件

依存関係

@syncfusion/ej2-layouts
  └── @syncfusion/ej2-base

CSS のインポート

@import "@syncfusion/ej2-base/styles/fluent2.css";
@import "@syncfusion/ej2-layouts/styles/fluent2.css";

HTML 要素

<div id="timeline"></div>

---

実装を始めますか？ 現在のタスクに応じて上記のリファレンスガイドを選ぶか、セットアップ手順についてははじめにから始めてください。