syncfusion-angular-card

Syncfusion Angular Cards の実装

Card は、構造化されたコンテンツを表示するための柔軟なコンテナーを提供する、軽量な CSS ベースのレイアウトコンポーネントです。ヘッダー、画像、テキスト、インタラクティブ要素を備えた再利用可能なコンテンツブロックの作成に最適です。

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

次のことが必要な場合に、このスキルを使用します。

• 構造化されたコンテンツを含むカードベースのレイアウトを作成する
• カードにタイトル、サブタイトル、画像を含むヘッダーを追加する
• カード内に画像やキャプションを含める
• カードにインタラクティブなアクションボタンを追加する
• カード要素を横方向に配置する
• CSS でカードの外観をカスタマイズする
• 柔軟でレスポンシブなコンテンツコンテナーを構築する
• カード内に他の Syncfusion コンポーネントを組み込む

コンポーネントの概要

Syncfusion Angular Card（e-card）は、JavaScript 依存関係のない純粋な CSS コンポーネントです。セマンティックな HTML 構造と CSS クラスを備えており、次の機能を持つプロフェッショナルなカードレイアウトを構築できます。

• 柔軟な構造： 複雑な依存関係のない、純粋な CSS による構成
• セマンティックな要素： ヘッダー、コンテンツ、アクションに対応する、明確なクラスベースのアーキテクチャ
• レスポンシブデザイン： CSS グリッド、フレックスボックス、レスポンシブレイアウトに対応
• コンポーネントの統合： カード内に他の Syncfusion コンポーネントを配置可能
• 幅広いカスタマイズ： 外観や動作を CSS で完全に制御可能

主な CSS クラス：

• e-card — カードのルートコンテナー
• e-card-header — ヘッダーセクションのラッパー
• e-card-content — メインコンテンツ領域
• e-card-image — 画像コンテナー
• e-card-actions — アクションボタンのコンテナー
• e-card-horizontal — 横方向のレイアウトモード
• e-card-separator — セクション間の視覚的な区切り

---

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

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールとセットアップ
• Angular CLI と環境の設定
• CSS テーマのインポートの追加
• ヘッダーとコンテンツを含む基本的なカード構造
• 最初に動作するカードの例

カードヘッダー

📄 参照： references/card-headers.md

• ヘッダー構造とラッパー要素
• タイトルとサブタイトルの追加
• ヘッダーへの画像の追加
• 画像の配置（キャプションの前または後）
• 角丸と画像のスタイル設定
• ヘッダーの完全な例

カード画像

📄 参照： references/card-images.md

• カードコンテンツへの画像の追加
• 画像のサイズと寸法
• オーバーレイ付きの画像タイトルとキャプション
• 視覚的に区切るための区切り線
• カード内への他のコンポーネントの統合
• 画像の完全な例

アクションボタン

📄 参照： references/action-buttons.md

• アクションボタンとリンクの作成
• ボタンの横方向の配置（デフォルト）
• ボタンの縦方向の配置
• アイコンボタンとカスタムスタイル
• インタラクティブなカードコントロール
• レイアウト別のボタンの例

横方向のレイアウト

📄 参照： references/horizontal-layout.md

• 要素を横並びに配置する方法
• e-card-horizontal クラスの使用
• e-card-stacked を使用したセクションの積み重ね
• 横方向と縦方向のレイアウトの組み合わせ
• 画像と縦方向のコンテンツの組み合わせ
• 横方向のレイアウトの例

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

📄 参照： references/styling-customization.md

• CSS の構造とクラスセレクター
• カードの外観のカスタマイズ
• ヘッダー、コンテンツ、ボタンのスタイル設定
• 画像と区切り線のカスタマイズ
• テーマの統合
• 高度な CSS パターン

---

クイックスタートの例

ヘッダー、コンテンツ、アクションボタンを含む、最小限の動作するカードを紹介します。

<div class="e-card" style="max-width: 400px;">
  
  <div class="e-card-header">
    <div class="e-card-header-caption">
      <div class="e-card-header-title">Card Title</div>
      <div class="e-card-sub-title">Subtitle or description</div>
    </div>
  </div>

  
  <div class="e-card-content">
    Your main content goes here. This can be text, images, or any HTML elements.
  </div>

  
  <div class="e-card-actions">
    <button class="e-card-btn">Action 1</button>
    <button class="e-card-btn">Action 2</button>
  </div>
</div>

コンポーネントでのセットアップ：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {}

styles.css に CSS テーマを追加：

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material3.css';

---

よく使われるパターン

パターン 1：画像付きの商品カード

画像、タイトル、説明、アクションボタンを使って商品を表示します。

<div class="e-card" style="max-width: 300px;">
  <div class="e-card-image" style="background-image: url('product.jpg'); height: 200px;"></div>
  <div class="e-card-header">
    <div class="e-card-header-title">Product Name</div>
  </div>
  <div class="e-card-content">Product description here</div>
  <div class="e-card-actions">
    <button class="e-card-btn">Add to Cart</button>
  </div>
</div>

パターン 2：ユーザープロフィールカード

アバターとソーシャルアクションを使ってユーザー情報を表示します。

<div class="e-card" style="max-width: 350px;">
  <div class="e-card-header">
    <div class="e-card-header-image" style="width: 60px; height: 60px; background-image: url('avatar.jpg');"></div>
    <div class="e-card-header-caption">
      <div class="e-card-header-title">John Doe</div>
      <div class="e-card-sub-title">Senior Developer</div>
    </div>
  </div>
  <div class="e-card-content">Bio or description text</div>
  <div class="e-card-actions">
    <button class="e-card-btn">Follow</button>
    <button class="e-card-btn">Message</button>
  </div>
</div>

パターン 3：横並びのカードレイアウト

画像と縦方向のコンテンツを組み合わせ、コンパクトな横並びレイアウトにします。

<div class="e-card e-card-horizontal" style="max-width: 500px;">
  <img src="image.jpg" alt="Image" style="height: 200px; width: 200px;">
  <div class="e-card-stacked">
    <div class="e-card-header">
      <div class="e-card-header-title">Title</div>
    </div>
    <div class="e-card-content">Content description</div>
  </div>
</div>

---

主要なプロパティとクラスのリファレンス

クラス	目的	用途
e-card	ルートコンテナー	すべてのカードで必須
e-card-header	ヘッダーのラッパー	タイトル、サブタイトル、画像をまとめます
e-card-header-caption	ヘッダーコンテンツのコンテナー	タイトルとサブタイトルを囲みます
e-card-header-title	メインヘッダーのタイトル	カードの見出し
e-card-sub-title	サブタイトルのテキスト	ヘッダーの補足情報
e-card-header-image	ヘッダー画像	アバターまたはヘッダー用のグラフィック
e-card-content	コンテンツ領域	カードのメインコンテンツ
e-card-image	コンテンツ画像	全幅またはサイズ指定の画像
e-card-title	画像上に重ねるタイトル	画像上のキャプション
e-card-separator	視覚的な区切り	セクション間の区切り
e-card-actions	ボタンのコンテナー	インタラクティブな要素をまとめます
e-card-btn	アクションボタンのスタイル	インタラクティブなボタン要素
e-card-vertical	縦方向の配置	アクションボタンを縦に並べます
e-card-horizontal	横並びのレイアウト	要素を横並びに配置します
e-card-stacked	縦方向のセクション	横並びレイアウト内の縦方向の領域
e-card-corner	角丸	画像に border-radius を追加します

---

コンポーネントのアーキテクチャ

Card コンポーネントでは、階層化された CSS 構造を使用します。

Card Container (e-card)
├── Header Section (e-card-header) [optional]
│   ├── Header Image (e-card-header-image) [optional]
│   └── Header Caption (e-card-header-caption)
│       ├── Header Title (e-card-header-title)
│       └── Subtitle (e-card-sub-title) [optional]
├── Image Container (e-card-image) [optional]
│   └── Image Title (e-card-title) [optional]
├── Content Section (e-card-content)
├── Separator (e-card-separator) [optional]
└── Actions Container (e-card-actions) [optional]
    ├── Button (e-card-btn)
    └── Link Elements

レイアウトモード：

• 縦方向（デフォルト）： すべての要素を縦に並べます
• 横方向： e-card-horizontal クラスを使用して、要素を横並びに配置します
• 横方向レイアウト内の縦積み： e-card-stacked を使用して、横方向レイアウト内の要素を縦方向に並べます

---

よくある使用例

1. 製品カタログ： 画像、説明、購入ボタンとともに製品を表示します
2. ユーザープロフィール： アバターとアクションボタンを添えてユーザー情報を表示します
3. ブログ記事： 画像、抜粋、記事を読むボタンを含む記事のプレビューを作成します
4. ダッシュボードウィジェット： データやインタラクティブな要素を含むダッシュボードカードを作成します
5. To-Do リスト： カードと ListView コンポーネントを組み合わせてタスクを管理します
6. 画像ギャラリー： キャプションとメタデータを添えて画像を表示します
7. チームメンバー： 連絡先や役職の情報を含むスタッフのプロフィールを表示します
8. 機能のハイライト： アイコンと説明を添えて機能を紹介します

---

次のステップ

ニーズに合わせて学習の進め方を選択してください。

• カードを初めて使いますか？ Getting Started から始めて、最初のカードを設定してください
• 複雑なヘッダーを作成しますか？ 高度なヘッダーのパターンについては、Card Headers をご覧ください
• カードのスタイルを設定しますか？ CSS のテクニックについては、Styling and Customization をご覧ください
• レイアウトを作成しますか？ 横並びの配置については、Horizontal Layout をご覧ください
• 完全な例が必要ですか？ 各リファレンスファイルには、コピーしてすぐに使える完全なコードが含まれています

---

ご質問はありますか？ 各リファレンスファイルには、詳細な例と例外的なケースが記載されています。現在のニーズに合ったトピックを参照してください。