syncfusion-angular-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Cards

实现Syncfusion Angular卡片组件

The Card is a lightweight, CSS-based layout component that provides a flexible container for displaying structured content. Perfect for creating reusable content blocks with headers, images, text, and interactive elements.

Card是一个轻量级、基于CSS的布局组件，可为展示结构化内容提供灵活的容器。非常适合创建带有标题、图片、文本和交互元素的可复用内容块。

When to Use This Skill

何时使用此技能

Use this skill when users need to:

Create card-based layouts with structured content
Add headers with titles, subtitles, and images to cards
Include images and captions within cards
Add interactive action buttons to cards
Arrange card elements horizontally
Customize card appearance with CSS
Build flexible, responsive content containers
Integrate other Syncfusion components within cards

当用户需要以下功能时，可使用此技能：

创建带有结构化内容的卡片式布局
为卡片添加包含标题、副标题和图片的头部
在卡片内添加图片和说明文字
为卡片添加交互式操作按钮
横向排列卡片元素
使用CSS自定义卡片外观
构建灵活、响应式的内容容器
在卡片内集成其他Syncfusion组件

Component Overview

组件概述

The Syncfusion Angular Card (

e-card

) is a pure CSS component with no JavaScript dependencies. It provides semantic HTML structure and CSS classes that enable you to build professional card layouts with:

Flexible Structure: Pure CSS composition with no complex dependencies
Semantic Elements: Clear class-based architecture for headers, content, and actions
Responsive Design: Works with CSS grid, flexbox, and responsive layouts
Component Integration: Host other Syncfusion components inside cards
Extensive Customization: Full CSS control over appearance and behavior

Key CSS Classes:

```
e-card
```
— Root card container
```
e-card-header
```
— Header section wrapper
```
e-card-content
```
— Main content area
```
e-card-image
```
— Image container
```
e-card-actions
```
— Action buttons container
```
e-card-horizontal
```
— Horizontal layout mode
```
e-card-separator
```
— Visual divider between sections

Syncfusion Angular Card（

e-card

）是一个纯CSS组件，无JavaScript依赖。它提供语义化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
```
— 区域间的视觉分隔线

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Package installation and setup
Angular CLI and environment configuration
Adding CSS theme imports
Basic card structure with headers and content
Your first working card example

📄 阅读： references/getting-started.md

包安装与配置
Angular CLI和环境配置
添加CSS主题导入
带有头部和内容的基础卡片结构
你的第一个可运行卡片示例

Card Headers

卡片头部

📄 Read: references/card-headers.md

Header structure and wrapper elements
Adding titles and subtitles
Including images in headers
Image positioning (before/after caption)
Rounded corners and image styling
Complete header examples

📄 阅读： references/card-headers.md

头部结构与包装元素
添加标题和副标题
在头部中包含图片
图片定位（说明文字之前/之后）
圆角与图片样式
完整的头部示例

Card Images

卡片图片

📄 Read: references/card-images.md

Adding images to card content
Image sizing and dimensions
Image titles and captions with overlay
Dividers for visual separation
Integrating other components inside cards
Complete image examples

📄 阅读： references/card-images.md

在卡片内容中添加图片
图片尺寸与比例
带有覆盖层的图片标题和说明
用于视觉分隔的分隔线
在卡片内集成其他组件
完整的图片示例

Action Buttons

操作按钮

📄 Read: references/action-buttons.md

Creating action buttons and links
Horizontal button alignment (default)
Vertical button alignment
Icon buttons and custom styling
Interactive card controls
Button examples with layouts

📄 阅读： references/action-buttons.md

创建操作按钮和链接
按钮横向对齐（默认）
按钮纵向对齐
图标按钮与自定义样式
交互式卡片控件
带布局的按钮示例

Horizontal Layout

横向布局

📄 Read: references/horizontal-layout.md

Side-by-side element alignment
Using the
```
e-card-horizontal
```
class
Stacked sections with
```
e-card-stacked
```
Mixed horizontal and vertical layouts
Combining images with vertical content
Horizontal layout examples

📄 阅读： references/horizontal-layout.md

元素并排对齐
使用
```
e-card-horizontal
```
类
用
```
e-card-stacked
```
实现堆叠区域
混合横向与纵向布局
图片与纵向内容组合
横向布局示例

Styling and Customization

样式与自定义

📄 Read: references/styling-customization.md

CSS structure and class selectors
Customizing card appearance
Header, content, and button styling
Image and divider customization
Theme integration
Advanced CSS patterns

📄 阅读： references/styling-customization.md

CSS结构与类选择器
自定义卡片外观
头部、内容和按钮样式
图片与分隔线自定义
主题集成
高级CSS模式

Quick Start Example

快速入门示例

Here's a minimal working card with header, content, and action buttons:

html

<!-- In your app.component.html or template -->
<div class="e-card" style="max-width: 400px;">
  <!-- Header Section -->
  <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>

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

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

Setup in Component:

typescript

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

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

Add CSS Theme to styles.css:

css

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

以下是一个包含头部、内容和操作按钮的最简可运行卡片：

html

<!-- 在你的app.component.html或模板中 -->
<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>

组件中的配置：

typescript

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主题：

css

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

Common Patterns

常见模式

Pattern 1: Product Card with Image

模式1：带图片的产品卡片

Display a product with image, title, description, and action buttons:

html

<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>

展示包含图片、标题、描述和操作按钮的产品：

html

<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>

Pattern 2: User Profile Card

模式2：用户资料卡片

Display user information with avatar and social actions:

html

<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>

展示包含头像和社交操作的用户信息：

html

<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>

Pattern 3: Horizontal Card Layout

模式3：横向卡片布局

Combine image with vertical content for compact horizontal layout:

html

<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>

将图片与纵向内容组合，实现紧凑的横向布局：

html

<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>

Key Props and Classes Reference

核心属性与类参考

Class	Purpose	Usage
`e-card`	Root container	Required for all cards
`e-card-header`	Header wrapper	Groups title, subtitle, images
`e-card-header-caption`	Header content container	Wraps titles and subtitles
`e-card-header-title`	Main header title	Card headline
`e-card-sub-title`	Subtitle text	Secondary header information
`e-card-header-image`	Header image	Avatar or header graphic
`e-card-content`	Content area	Main card body content
`e-card-image`	Content image	Full-width or sized images
`e-card-title`	Image overlay title	Caption over images
`e-card-separator`	Visual divider	Separation between sections
`e-card-actions`	Buttons container	Groups interactive elements
`e-card-btn`	Action button style	Interactive button element
`e-card-vertical`	Vertical alignment	Stack action buttons vertically
`e-card-horizontal`	Horizontal layout	Side-by-side element arrangement
`e-card-stacked`	Vertical section	Vertical area within horizontal layout
`e-card-corner`	Rounded corners	Add border-radius to images

类	用途	使用场景
`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`	圆角	为图片添加圆角

Component Architecture

组件架构

The Card component uses a layered CSS structure:

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

Layout Modes:

Vertical (default): All elements stack vertically
Horizontal: Use
```
e-card-horizontal
```
class to arrange elements side-by-side
Stacked within Horizontal: Use
```
e-card-stacked
```
to force vertical flow in horizontal layouts

Card组件采用分层CSS结构：

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

布局模式：

纵向（默认）： 所有元素纵向堆叠
横向： 使用
```
e-card-horizontal
```
类实现元素并排排列
横向内堆叠： 使用
```
e-card-stacked
```
在横向布局中强制纵向流

Common Use Cases

常见使用场景

Product Catalogs: Display products with images, descriptions, and purchase buttons
User Profiles: Show user information with avatars and action buttons
Blog Posts: Create article previews with images, excerpts, and read buttons
Dashboard Widgets: Build dashboard cards with data and interactive elements
To-Do Lists: Combine cards with ListView components for task management
Image Galleries: Display images with captions and metadata
Team Members: Show staff profiles with contact and role information
Feature Highlights: Showcase features with icons and descriptions

产品目录： 展示包含图片、描述和购买按钮的产品
用户资料： 展示包含头像和操作按钮的用户信息
博客文章： 创建包含图片、摘要和阅读按钮的文章预览
仪表板小部件： 构建包含数据和交互元素的仪表板卡片
待办事项列表： 将卡片与ListView组件结合用于任务管理
图片画廊： 展示包含说明和元数据的图片
团队成员： 展示包含联系方式和职位信息的员工资料
功能亮点： 展示包含图标和描述的功能

Next Steps

下一步

Choose your learning path based on your needs:

New to Cards? Start with Getting Started to set up your first card
Building Complex Headers? Read Card Headers for advanced header patterns
Styling Your Cards? Check Styling and Customization for CSS techniques
Creating Layouts? Explore Horizontal Layout for side-by-side arrangements
Need Full Examples? Each reference file includes complete, copy-paste-ready code

Questions? Each reference file has detailed examples and edge cases. Refer to the specific topic that matches your current need.

根据你的需求选择学习路径：

首次使用卡片？ 从快速入门开始，创建你的第一个卡片
构建复杂头部？ 阅读卡片头部了解高级头部模式
自定义卡片样式？ 查看样式与自定义学习CSS技巧
创建布局？ 探索横向布局了解并排排列方式
需要完整示例？ 每个参考文件都包含可直接复制使用的完整代码

有疑问？ 每个参考文件都有详细示例和边界情况说明。请查阅与你当前需求匹配的主题。