Timeline

Timelineコンポーネントは、時系列のイベントやプロジェクトの進捗を視覚的に表示するためのコンポーネントです。TimelineItemと組み合わせて使用し、ストーリー風の表示を実現します。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

バリエーション: default, compact, spacious
テーマ対応: ライトテーマとダークテーマの自動切り替え
アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応
レスポンシブ: モバイルファーストのレスポンシブデザイン

使用方法

---
import { Timeline, TimelineItem } from '@karan-monorepo/ui-core';
---

<!-- ライトテーマ -->
<kds-timeline theme="light" variant="spacious" centered>
  <kds-timeline-item
    title="E-commerce Platform"
    subtitle="Web Application"
    time="2023"
    icon="🛒"
    image="/default-hero-for-kds.webp"
    image-alt="E-commerce Platform"
    theme="light"
    variant="info"
    is-first="true"
    is-last="false"
  >
    <p>フルスタックECサイトアプリケーション。ユーザー認証、決済処理、管理ダッシュボードを備えた現代的なWeb技術で構築。</p>
  </kds-timeline-item>
</kds-timeline>

<!-- ダークテーマ -->
<kds-timeline theme="dark" variant="spacious" centered>
  <kds-timeline-item
    title="E-commerce Platform"
    subtitle="Web Application"
    time="2023"
    icon="🛒"
    image="/default-hero-for-kds.webp"
    image-alt="E-commerce Platform"
    theme="dark"
    variant="info"
    is-first="true"
    is-last="false"
  >
    <p>フルスタックECサイトアプリケーション。ユーザー認証、決済処理、管理ダッシュボードを備えた現代的なWeb技術で構築。</p>
  </kds-timeline-item>
</kds-timeline>

プロパティ

Timeline

プロパティ	型	デフォルト	説明
`theme`	`'light' \| 'dark'`	`'light'`	コンポーネントのカラーテーマ
`variant`	`'default' \| 'compact' \| 'spacious'`	`'default'`	タイムラインの表示スタイル
`centered`	`boolean`	`false`	タイムラインを中央揃えにするかどうか

TimelineItem

プロパティ	型	デフォルト	説明
`title`	`string`	`''`	タイムラインアイテムのタイトル
`subtitle`	`string`	`''`	タイムラインアイテムのサブタイトル
`time`	`string`	`''`	時間や日付の表示
`icon`	`string`	`'•'`	タイムラインマーカーのアイコン
`image`	`string`	`''`	表示する画像のURL
`imageAlt`	`string`	`''`	画像のalt属性テキスト
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	アイテムのバリエーション
`theme`	`'light' \| 'dark'`	`'light'`	コンポーネントのカラーテーマ
`isFirst`	`boolean`	`false`	最初のアイテムかどうか
`isLast`	`boolean`	`false`	最後のアイテムかどうか

使用例

Timeline Component

Timelineコンポーネントは、時系列のイベントやプロジェクトの進捗を視覚的に表示するためのコンポーネントです。TimelineItemと組み合わせて使用し、ストーリー風の表示を実現します。

Variants

Default

プロジェクトの開始と初期計画

開発と実装の段階

Compact

コンパクトな表示

Spacious

より広いスペースでの表示

TimelineItem Variants

Default

デフォルトのスタイル

Success

成功を示すアイテム

Warning

注意が必要なアイテム

Error

エラーを示すアイテム

Info

情報を示すアイテム

Themes

Light Theme

ライトテーマでの表示

Dark Theme

ダークテーマでの表示

Theme Comparison

Light Theme Variants

成功を示すアイテム

注意が必要なアイテム

エラーを示すアイテム

Dark Theme Variants

成功を示すアイテム

注意が必要なアイテム

エラーを示すアイテム

Usage Examples

Project Timeline with Images (Light Theme)

フルスタックECサイトアプリケーション。ユーザー認証、決済処理、管理ダッシュボードを備えた現代的なWeb技術で構築。

使用技術: React, Node.js, MongoDB, Stripe

Three.jsを使用したインタラクティブ3Dポートフォリオ。没入感のあるアニメーションとクリエイティブな視覚効果で、プロジェクトを魅力的な3D環境で展示。

使用技術: Three.js, WebGL, React, TypeScript

Project Timeline with Images (Dark Theme)

フルスタックECサイトアプリケーション。ユーザー認証、決済処理、管理ダッシュボードを備えた現代的なWeb技術で構築。

使用技術: React, Node.js, MongoDB, Stripe

使用技術: Three.js, WebGL, React, TypeScript

バリエーション

Timelineコンポーネントは3つの表示バリエーションをサポートします：

default: 標準的なパディングとスペーシング
compact: コンパクトな表示でスペースを節約
spacious: より広いスペースでの表示

<!-- デフォルト -->
<kds-timeline variant="default" theme="light">
  <kds-timeline-item title="Default" theme="light" variant="info" is-first="true" is-last="true">
    <p>標準的な表示</p>
  </kds-timeline-item>
</kds-timeline>

<!-- コンパクト -->
<kds-timeline variant="compact" theme="light">
  <kds-timeline-item title="Compact" theme="light" variant="success" is-first="true" is-last="true">
    <p>コンパクトな表示</p>
  </kds-timeline-item>
</kds-timeline>

<!-- スペーシャス -->
<kds-timeline variant="spacious" theme="light">
  <kds-timeline-item title="Spacious" theme="light" variant="warning" is-first="true" is-last="true">
    <p>広いスペースでの表示</p>
  </kds-timeline-item>
</kds-timeline>

<!-- ダークテーマの例 -->
<kds-timeline variant="default" theme="dark">
  <kds-timeline-item title="Dark Theme" theme="dark" variant="info" is-first="true" is-last="true">
    <p>ダークテーマでの表示</p>
  </kds-timeline-item>
</kds-timeline>

TimelineItemバリエーション

TimelineItemコンポーネントは5つの視覚的バリエーションをサポートします：

default: 標準的なスタイル
success: 成功を示す緑色のマーカー
warning: 注意を示す黄色のマーカー
error: エラーを示す赤色のマーカー
info: 情報を示す青色のマーカー

<!-- デフォルト -->
<kds-timeline-item variant="default" theme="light" is-first="true" is-last="true">
  <p>標準的なアイテム</p>
</kds-timeline-item>

<!-- 成功 -->
<kds-timeline-item variant="success" theme="light" is-first="true" is-last="true">
  <p>成功を示すアイテム</p>
</kds-timeline-item>

<!-- 警告 -->
<kds-timeline-item variant="warning" theme="light" is-first="true" is-last="true">
  <p>警告を示すアイテム</p>
</kds-timeline-item>

<!-- エラー -->
<kds-timeline-item variant="error" theme="light" is-first="true" is-last="true">
  <p>エラーを示すアイテム</p>
</kds-timeline-item>

<!-- 情報 -->
<kds-timeline-item variant="info" theme="light" is-first="true" is-last="true">
  <p>情報を示すアイテム</p>
</kds-timeline-item>

<!-- ダークテーマの例 -->
<kds-timeline-item variant="success" theme="dark" is-first="true" is-last="true">
  <p>ダークテーマでの成功アイテム</p>
</kds-timeline-item>

使用ケース

プロジェクトタイムライン

<!-- ライトテーマ -->
<kds-timeline theme="light" variant="spacious" centered>
  <kds-timeline-item
    title="Project Planning"
    subtitle="Phase 1"
    time="2024 Q1"
    theme="light"
    variant="info"
    is-first="true"
    is-last="false"
  >
    <p>プロジェクトの計画と要件定義を行いました。</p>
    <ul>
      <li>要件分析</li>
      <li>技術選定</li>
      <li>スケジュール策定</li>
    </ul>
  </kds-timeline-item>
  <kds-timeline-item
    title="Development"
    subtitle="Phase 2"
    time="2024 Q2"
    theme="light"
    variant="success"
    is-first="false"
    is-last="true"
  >
    <p>開発と実装を進めました。</p>
  </kds-timeline-item>
</kds-timeline>

<!-- ダークテーマ -->
<kds-timeline theme="dark" variant="spacious" centered>
  <kds-timeline-item
    title="Project Planning"
    subtitle="Phase 1"
    time="2024 Q1"
    theme="dark"
    variant="info"
    is-first="true"
    is-last="false"
  >
    <p>プロジェクトの計画と要件定義を行いました。</p>
    <ul>
      <li>要件分析</li>
      <li>技術選定</li>
      <li>スケジュール策定</li>
    </ul>
  </kds-timeline-item>
  <kds-timeline-item
    title="Development"
    subtitle="Phase 2"
    time="2024 Q2"
    theme="dark"
    variant="success"
    is-first="false"
    is-last="true"
  >
    <p>開発と実装を進めました。</p>
  </kds-timeline-item>
</kds-timeline>

キャリアタイムライン

<!-- ライトテーマ -->
<kds-timeline theme="light" variant="default">
  <kds-timeline-item
    title="Software Engineer"
    subtitle="Tech Company"
    time="2023 - Present"
    theme="light"
    variant="success"
    is-first="true"
    is-last="false"
  >
    <p>フルスタック開発者として活躍中</p>
  </kds-timeline-item>
  <kds-timeline-item
    title="Junior Developer"
    subtitle="Startup"
    time="2022 - 2023"
    theme="light"
    variant="info"
    is-first="false"
    is-last="true"
  >
    <p>ジュニア開発者として経験を積みました</p>
  </kds-timeline-item>
</kds-timeline>

<!-- ダークテーマ -->
<kds-timeline theme="dark" variant="default">
  <kds-timeline-item
    title="Software Engineer"
    subtitle="Tech Company"
    time="2023 - Present"
    theme="dark"
    variant="success"
    is-first="true"
    is-last="false"
  >
    <p>フルスタック開発者として活躍中</p>
  </kds-timeline-item>
  <kds-timeline-item
    title="Junior Developer"
    subtitle="Startup"
    time="2022 - 2023"
    theme="dark"
    variant="info"
    is-first="false"
    is-last="true"
  >
    <p>ジュニア開発者として経験を積みました</p>
  </kds-timeline-item>
</kds-timeline>

スタイリング

Timelineコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

Timelineコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTMLの構造を使用
キーボードナビゲーションサポート
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造

ベストプラクティス

isFirstとisLastの適切な設定: タイムラインの最初と最後のアイテムに正しく設定する
意味のあるバリエーション: コンテンツの意味に応じて適切なvariantを選択する
適切なスペーシング: コンテンツ量に応じてvariantを選択する
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

Timelineコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Flexbox
CSS Grid