syncfusion-blazor-card

Syncfusion Blazor Card コンポーネントの実装

Syncfusion Blazor Card コンポーネントは、ヘッダー、画像、テキスト、アクションボタン、カスタムスタイルを使ってコンテンツを整理できる、軽量で柔軟なコンテナーです。カードは、関連する情報を視覚的に魅力的な形式で表示するのに適しています。

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

次のような場合に、このスキルを使用してください。

• 整理されたコンテンツを表示する、再利用可能なカードコンテナーを作成する
• ヘッダー、サブタイトル、画像とともにコンテンツを表示する
• カードにアクションボタンとフッターを追加する
• カードを水平方向または垂直方向に配置する
• カードにカスタムスタイルやテーマを適用する
• カードをベースにしたレスポンシブな UI レイアウトを構築する
• 関連するコンテンツを、視覚的に区別された個別のコンテナーに整理する
• カードのセクションを分ける区切り線を実装する

コンポーネントの概要

SfCard コンポーネントは、次の機能を提供します。

• 柔軟な構造：ヘッダー、画像、コンテンツ、フッターを組み合わせてカードを構成できます
• 複数のレイアウト：垂直方向（既定）と水平方向の配置
• 豊富なコンテンツのサポート：テキスト、画像、ボタン、HTML 要素
• スタイリング：組み込みの CSS クラスとカスタムスタイルのオプション
• コンポーネントベースのアーキテクチャ：CardHeader、CardContent、CardImage、CardFooter などの Blazor コンポーネントを使用できます

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

Card のセットアップを開始する

📄 参照： references/getting-started.md

• インストールと NuGet パッケージ
• プロジェクトのセットアップ（WASM、Web App、Server App の各構成）
• 名前空間のインポートとサービスの登録
• 基本的なカードコンポーネントの作成
• 初回のレンダリングを行う最小限の動作例

Card の構造を構築する

📄 参照： references/building-card-structure.md

• ヘッダー要素（Title、SubTitle、ImageUrl）
• コンテンツセクションとテキストの配置
• 視覚要素に使用する CardImage コンポーネント
• セクションを分ける区切り線
• 1 つのカード内に複数のコンテンツセクションを配置する方法
• ネストした要素を含む複雑なカードレイアウト

カードのレイアウトと向き

📄 参照： references/card-layouts-and-orientation.md

• 既定の垂直方向のカードレイアウト
• 水平方向の配置（CardOrientation.Horizontal）
• 垂直セクションに使用する CardStacked コンポーネント
• 複数の向きの組み合わせ
• レスポンシブなレイアウトと配置

アクションボタンとフッター

📄 参照： references/action-buttons-and-footers.md

• CardFooter コンポーネントと CardFooterContent コンポーネント
• カードのフッターへのボタンの追加
• 垂直方向のボタン配置
• ボタンのスタイリングと統合
• クリックハンドラーとインタラクティブ機能

スタイリングとカスタマイズ

📄 参照： references/styling-and-customization.md

• CSS クラスのカスタマイズ（.e-card、.e-card-header など）
• ヘッダー要素とタイトルのスタイリング
• コンテンツと区切り線のスタイリング
• 画像のスタイリングと背景
• ボタンフッターのスタイリング
• テーマのカスタマイズと高度なスタイリング

API リファレンス

📄 参照： references/api-reference.md

• すべてのコンポーネントのプロパティリファレンス
• 列挙値と受け入れ可能なパラメーター
• スタイリングに使用する CSS クラスの一覧
• コンポーネントの階層と統合
• クイックリファレンスの例

クイックスタートの例

ヘッダーとコンテンツを含む基本的なカード

@using Syncfusion.Blazor.Cards

<SfCard>
    <CardHeader Title="Welcome" SubTitle="Getting Started"></CardHeader>
    <CardContent Content="This is a basic Syncfusion Blazor Card component with header and content."></CardContent>
</SfCard>

画像とアクションボタンを含むカード

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardImage Image="images/card.png"/>
    <CardHeader Title="Product Title" SubTitle="by Company"></CardHeader>
    <CardContent Content="Description of the product goes here with key features and benefits."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-outline e-primary">BUY NOW</SfButton>
            <SfButton CssClass="e-btn e-outline">DETAILS</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

積み重ねたセクションを含む水平方向のカード

@using Syncfusion.Blazor.Cards

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Syncfusion Card" />
        <CardContent Content="The Syncfusion Blazor Card component is used to display content in organized containers." />
    </CardStacked>
    <img src="images/card-image.png" alt="Card" />
</SfCard>

よくあるパターン

パターン 1：商品カード

画像、ヘッダー、説明、アクションボタンを組み合わせて、商品一覧を表示します。

<SfCard>
    <CardImage Image="product.png"/>
    <CardHeader Title="Product Name" SubTitle="$49.99"/>
    <CardContent Content="High-quality product description with key features."/>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">ADD TO CART</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

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

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

<SfCard>
    <CardHeader Title="John Doe" SubTitle="UI Designer" ImageUrl="avatar.png"/>
    <CardContent Content="Creative designer with 5+ years experience in web and mobile design."/>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-outline">FOLLOW</SfButton>
            <SfButton CssClass="e-btn e-outline">MESSAGE</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

パターン 3：複数セクションのカード

複数の CardContent 要素と区切り線を使って、情報を整理します。

<SfCard>
    <CardHeader Title="City Information" />
    <CardContent EnableSeparator="true">
        <strong>Sydney</strong><br/>
        Capital of New South Wales, Australia
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Location</strong><br/>
        East coast of Australia
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Population</strong><br/>
        Approximately 4 million residents
    </CardContent>
</SfCard>

主なコンポーネント

コンポーネント	用途
SfCard	Orientation プロパティを任意で指定できる、カードのルートコンテナー
CardHeader	Title、SubTitle、任意の ImageUrl を表示します
CardImage	カード内に画像要素を表示します
CardContent	EnableSeparator を任意で指定できる、テキストおよび HTML コンテンツを格納します
CardFooter	アクションボタン用のフッターセクション
CardFooterContent	フッターコンテンツ（ボタン）用のコンテナー
CardStacked	横型カード内に縦方向のセクションを作成します

主なプロパティ

プロパティ	値	用途
Orientation	Vertical（デフォルト）、Horizontal	カード要素の配置方法を指定します
ID	string	カードの一意な識別子
Title	string	カードヘッダーのメインタイトル
SubTitle	string	カードヘッダーのサブタイトル
ImageUrl	string	ヘッダー画像のパス
Content	string	カードのコンテンツテキスト
EnableSeparator	true/false	セクション間に区切り線を追加します
Image	string	CardImage のソースパス

簡単な選択ガイド

カードのレイアウトを選ぶ場合：

• 縦型カード：デフォルトです。商品一覧、プロフィール、情報カードに使用します
• 横型カード：大きな画像を含む注目アイテムに使用します
• 複数のセクション：データを整理するには、EnableSeparator を指定した CardContent を使用します
• アクションボタン：インタラクティブなカードでは、必ず CardFooter と CardFooterContent を使用します

統合ポイント

• SfButton との連携：カードのフッターにインタラクティブなアクションボタンを配置する場合に使用します
• CSS クラスとの連携：スタイルを適用するには、.e-card、.e-card-header、.e-card-content を適用します
• HTML との連携：カスタム HTML を CardContent に直接埋め込みます
• 画像との連携：ビジュアルコンテンツには CardImage または img タグを使用します

---

参考資料

• Syncfusion Blazor Card のドキュメント
• システム要件
• NuGet パッケージ