syncfusion-angular-timeline

Syncfusion Angular Timeline の実装

Timeline コンポーネントは、イベントやマイルストーンを時系列順に表示します。豊富なカスタマイズオプションを備え、垂直レイアウトと水平レイアウトの両方に対応しています。

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

• 製品ロードマップ： 製品の変遷やリリースのマイルストーンを表示します
• プロジェクトのタイムライン： プロジェクトのフェーズや成果物を示します
• アクティビティフィード： 最近のアクティビティを新しい順に表示します
• キャリア／教育： キャリアの歩みや教育上の実績を示します
• ビジネスイベント： 会社の歴史、重要なマイルストーン、プロセスを視覚化します
• 旅行の旅程： 予定されているアクティビティやイベントを表示します
• ニュースタイムライン： ニュース項目やお知らせを時系列順に表示します

コンポーネントの概要

Timeline コンポーネントでは、次のことができます。

• 柔軟な方向設定（垂直／水平）
• 複数のコンテンツ配置（Before、After、Alternate、AlternateReverse）
• oppositeContent による両側へのコンテンツ配置
• ライフサイクルやレンダリング用のイベントハンドラー
• ドットとコネクターの幅広いカスタマイズ
• レイアウト全体を制御できるテンプレートのサポート
• アイテム単位のカスタマイズ（無効化、スタイル設定、コンテンツ）

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• 基本的な Timeline の作成
• Angular 21 のスタンドアロンアーキテクチャのセットアップ
• TimelineModule と TimelineAllModule のインポート
• アイテムを使用した最初の動作サンプル

アイテムとコンテンツ

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

• 文字列コンテンツと反対側のコンテンツの設定
• テンプレートベースのコンテンツ描画
• アイテムのスタイル設定用 CSS クラス
• 無効状態と dot-item プロパティ
• 配列からのデータバインディング
• content プロパティの使用方法

配置

📄 参照： references/alignment.md

• align プロパティによるコンテンツの配置
• Before 配置（水平／垂直の動作）
• After 配置
• Alternate 配置（ジグザグパターン）
• AlternateReverse 配置
• 配置と方向の組み合わせ

方向と逆順

📄 参照： references/orientations-and-reverse.md

• 垂直方向（デフォルト、上から下）
• 水平方向（左から右）
• reverse プロパティによる順序の反転
• 新しい項目を先に表示するタイムライン
• さまざまな配置と reverse の組み合わせ
• アクティビティフィードやニュースでの使用例

カスタマイズ

📄 参照： references/customization.md

• コネクターのスタイル設定（共通コネクターと個別アイテムのコネクター）
• ドットの外観：サイズ、色、アウトライン、影、バリエーション
• dotCss プロパティによるドットアイコン（Material Icons、FontAwesome）
• アイテムの間隔と枠線
• CSS クラスベースのカスタマイズ
• アイテム単位と全体のコネクタースタイル設定
• 高度なビジュアルスタイル設定の例

イベント

📄 参照： references/events.md

• Created イベント（コンポーネントの初期化）
• BeforeItemRender イベント（描画前のカスタマイズ）
• イベントハンドラーの設定とバインド
• イベントを介したアイテムの動的な変更
• 描画中の条件付きスタイル設定
• イベント引数とプロパティ

テンプレート

📄 参照： references/templates.md

• 完全なカスタマイズを行う template プロパティ
• テンプレートコンテキスト（item、itemIndex）
• カスタムドットインジケーターの設計
• コンテンツ領域のレイアウトの再構成
• テンプレートによるカスタムコネクター
• 高度なレイアウトの例

API リファレンス

📄 参照： references/api-reference.md

• 例を含むすべてのプロパティのドキュメント
• すべてのコンポーネントプロパティの説明（enablePersistence、enableRtl、locale などの高度なプロパティを含む）
• すべてのアイテムプロパティの説明
• イベントのバインドと処理
• 列挙値（TimelineAlign、TimelineOrientation）
• すべてのプロパティとイベントの動作するコード例

クイックスタートの例

import { Component } from '@angular/core';
import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
import { CommonModule } from '@angular/common';

@Component({
  imports: [CommonModule, TimelineModule, TimelineAllModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="container">
      <ejs-timeline orientation="Vertical" align="Before">
        <e-items>
          <e-item *ngFor="let item of milestones" [content]="item.content" [oppositeContent]="item.oppositeContent"></e-item>
        </e-items>
      </ejs-timeline>
    </div>
  `,
  styles: [`.container { padding: 20px; }`]
})
export class AppComponent {
  public milestones: TimelineItemModel[] = [
    { content: 'Q1 2024', oppositeContent: 'Planning phase' },
    { content: 'Q2 2024', oppositeContent: 'Development' },
    { content: 'Q3 2024', oppositeContent: 'Testing' },
    { content: 'Q4 2024', oppositeContent: 'Launch' }
  ];
}

よく使われるパターン

パターン 1：アクティビティフィード（新しい順）

<ejs-timeline [reverse]="true" align="Before">
  <e-items>
    <e-item *ngFor="let activity of recentActivities" [content]="activity.time" [oppositeContent]="activity.description"></e-item>
  </e-items>
</ejs-timeline>

使用する場面： 最新のアクティビティを先に表示する場合、ニュースフィード、ログエントリー。

パターン 2：交互のタイムライン（バランスの取れたレイアウト）

<ejs-timeline align="Alternate" orientation="Horizontal">
  <e-items>
    <e-item *ngFor="let event of events" [content]="event.title" [oppositeContent]="event.description"></e-item>
  </e-items>
</ejs-timeline>

使用する場面： 視覚的なバランスを取る場合、左右に交互にコンテンツを配置する場合、会社の沿革。

パターン 3：カスタムスタイルのタイムライン

<ejs-timeline align="Before" [cssClass]="'custom-timeline'">
  <e-items>
    <e-item *ngFor="let item of items" [content]="item.content" [cssClass]="item.cssClass" [disabled]="item.disabled"></e-item>
  </e-items>
</ejs-timeline>

使用する場面： ブランドに合わせたスタイル、項目の状態を視覚的に区別する場合、カスタムテーマ。

主なプロパティ

プロパティ	型	デフォルト	目的
レイアウトと表示
orientation	Vertical | Horizontal	Vertical	タイムラインのレイアウト方向
align	Before | After | Alternate | AlternateReverse	After	コンテンツの配置
reverse	boolean	false	項目の順序を逆にします（新しい項目を先頭に表示）
items	TimelineItemModel[]	[]	タイムライン項目の配列
項目のコンテンツ
content	string | object	-	項目のメインテキスト／コンテンツ
oppositeContent	string | object	-	反対側に表示するコンテンツ
dotCss	string	-	ドットアイコンの CSS クラス
cssClass	string	-	項目のスタイル用 CSS クラス
disabled	boolean	false	個別の項目を無効にします
カスタマイズ
template	string | object	-	カスタム項目テンプレート
cssClass (component)	string	-	コンポーネントの CSS クラス
詳細設定
enablePersistence	boolean	false	状態を localStorage に保存します
enableRtl	boolean	false	右から左へのレイアウトをサポートします
locale	string	en-US	ローカライズ設定
イベント
created	Event	-	コンポーネントのレンダリング後に発生します
beforeItemRender	Event	-	項目のレンダリング前に発生します

詳細、例、高度な設定については、references/api-reference.md を参照してください。

一般的な使用例

1. 製品ロードマップ： マイルストーンと機能を示す水平タイムライン
2. プロジェクトの状況： フェーズと進捗を示す交互配置のタイムライン
3. キャリアのタイムライン： 職務と日付を示す垂直タイムライン
4. 会社の沿革： 会社の変遷を示す逆順のタイムライン
5. 旅行日程： 場所とアクティビティの情報を示す垂直タイムライン
6. ユーザーアクティビティログ： タイムスタンプとアクションを示す逆順のタイムライン
7. ニュースフィード： 見出しを示す水平の逆順タイムライン
8. 学習経路： 学位とコースを示す垂直の交互配置タイムライン