syncfusion-blazor-timeline

Blazor Timeline コンポーネントの実装

Syncfusion Blazor Timeline コンポーネントを使用すると、一連のイベントやマイルストーンを時系列で表示できます。プロジェクトの進捗状況、歴史の年表、配送状況の追跡、プロセスのワークフローを可視化するのに最適です。

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

次のような場合に Timeline コンポーネントを使用します。

• イベントを時系列順に表示する場合（プロジェクトのフェーズ、配送状況の追跡、ワークフローのステップ）
• 反対側にコンテンツを配置して前後の情報を表示する場合（日付と説明の組み合わせなど）
• 縦または横向きのタイムラインレイアウトを作成する場合
• 視覚的な外観（色、ドット、コネクタ）をカスタマイズする場合
• テンプレートを使用して複雑なコンテンツをレンダリングする場合
• コンポーネントのライフサイクルイベントを処理する場合

コンポーネントの概要

Timeline コンポーネントは、一連のアイテムを順にレンダリングします。各アイテムには次の要素が含まれます。

• Content：主な情報または説明
• OppositeContent：Content の反対側に表示される補足情報
• Dot：視覚的なインジケーター（アイコン、画像、テキストでカスタマイズ可能）
• Connector：アイテム同士を視覚的につなぐ線

主な機能：

• 複数の配置モード（Before、After、Alternate、AlternateReverse）
• 横向きおよび縦向きの表示
• アイテムごとのスタイルと無効状態のカスタマイズ
• コンポーネントのライフサイクルに関するイベントコールバック
• 高度なレイアウト向けのテンプレートベースのレンダリング
• 逆順でのレンダリング

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

はじめに

📄 参照先： references/getting-started.md

• Syncfusion.Blazor.Layouts と Themes の NuGet パッケージをインストールする
• インポートを設定し、Blazor サービスを登録する
• スタイルシートとスクリプトのリソースを追加する
• 最初の基本的なタイムラインを作成する
• アプリケーションを実行してテストする

Timeline の配置

📄 参照先： references/timeline-alignment.md

• Alignment プロパティでコンテンツの表示を制御する
• Before：Content を前／左側に、OppositeContent を後／右側に配置します
• After：Content を後／右側に、OppositeContent を前／左側に配置します
• Alternate：向きに関係なく、アイテムを交互に配置します
• AlternateReverse：交互の配置を逆にします
• 配置と組み合わせて OppositeContent を使用する

Timeline のアイテム

📄 参照先： references/timeline-items.md

• Content ディレクティブを含む TimelineItem コンポーネントを追加する
• 文字列コンテンツとテンプレートコンテンツのアプローチ
• 2つの情報を表示する OppositeContent
• DotCss でドットをカスタマイズする（アイコン、画像、テキスト）
• Disabled プロパティでアイテムを無効にする
• CssClass でカスタム CSS クラスを適用する

Timeline の向き

📄 参照先： references/timeline-orientation.md

• 縦向き：アイテムを上から下へ順に表示します（既定）
• 横向き：アイテムを横並びで表示します
• 向きと配置を組み合わせて、さまざまなレイアウトを作成する
• レスポンシブ対応に関する考慮事項

Timeline のイベント

📄 参照先： references/timeline-events.md

• Created：コンポーネントのレンダリング完了時に発生します
• ItemRendered：各アイテムのレンダリング後に発生します
• イベント引数とアイテム情報にアクセスする
• 一般的なイベント処理のパターン

スタイルとカスタマイズ

📄 参照先： references/timeline-styling-customization.md

• コネクタのスタイル設定（共通および個別）
• ドットの色、サイズ、影、バリアントのカスタマイズ
• ドットの外観を設定する CSS 変数（--dot-size、--dot-outer-space、--dot-border）
• ドットのアウトラインモード（e-outline クラス）
• コンポーネントレベルの CSS クラス

テンプレートと高度なパターン

📄 参照先： references/timeline-templates.md

• Template ディレクティブでアイテム全体をカスタマイズする
• テンプレートコンテキストから Item と ItemIndex にアクセスする
• プログレスバー、カスタムコネクタ、インジケーターを作成する
• 高度なレイアウトパターン

API リファレンス

📄 参照: references/api-reference.md

• SfTimeline コンポーネントのすべてのプロパティ
• TimelineItem のプロパティと設定
• TimelineAlignment の列挙値
• TimelineOrientation の列挙値
• TimelineRenderedEventArgs のイベント引数
• CSS クラスと CSS 変数
• すべての API のコード例
• 一般的な実装パターン

クイックスタートの例

@using Syncfusion.Blazor.Layouts

<div style="height: 350px;">
    <SfTimeline>
        <TimelineItems>
            <TimelineItem>
                <Content>Event 1</Content>
                <OppositeContent>2024-01-01</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Event 2</Content>
                <OppositeContent>2024-01-15</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Event 3</Content>
                <OppositeContent>2024-02-01</OppositeContent>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

一般的なユースケース

1. 注文／配送のタイムライン

反対側のコンテンツとの配置を使用して、タイムスタンプと場所を含む注文状況を表示します。

2. プロジェクトのマイルストーンのタイムライン

水平配置を使用して、開始日／終了日と説明を含むプロジェクトの各フェーズを表示します。

3. 歴史年表

Alternate 配置を使用して、片側に日付、もう片側に説明を表示し、歴史的な出来事を垂直に示します。

4. 進捗状況の追跡

完了済みと保留中の項目を区別するため、ドットの色をカスタマイズし、無効状態を設定してワークフローのステップを可視化します。

主なプロパティ

プロパティ	型	目的
Alignment	TimelineAlignment enum	コンテンツの位置を設定します（Before、After、Alternate、AlternateReverse）
Orientation	TimelineOrientation enum	レイアウトの方向を設定します（Vertical、Horizontal）
Reverse	bool	項目の順序を逆にします
CssClass	string	スタイル設定用のカスタム CSS クラス
Created	event	コンポーネントのレンダリング完了時に発生します
ItemRendered	event	各項目のレンダリング後に発生します

項目のプロパティ:

プロパティ	型	目的
Content	RenderFragment	主な情報
OppositeContent	RenderFragment	補足情報
DotCss	string	ドットのスタイル設定用 CSS クラス（アイコン、画像）
Disabled	bool	項目を無効にします
CssClass	string	項目のスタイル設定用カスタム CSS クラス

主なセットアップ手順

1. NuGet パッケージをインストール: Syncfusion.Blazor.Layouts、Syncfusion.Blazor.Themes
2. インポートを追加: _Imports.razor に @using Syncfusion.Blazor.Layouts を追加します
3. サービスを登録: Program.cs に builder.Services.AddSyncfusionBlazor() を追加します
4. スタイルシートを含める: index.html に material3.css を追加します
5. タイムラインを作成: <TimelineItems> コレクションを含む <SfTimeline> を使用します