CardBook

CardBook 组件用于展示一本书的信息。支持传入封面图；当未提供封面时，将根据书名使用智能渐变背景作为占位，并在中央显示书名。

简介

适用于课程、图书列表、阅读推荐等场景。

案例

基础用法

Refactoring: Improving the Design of Existing Code

Martin Fowler

通过重构改善代码设计的经典著作，涵盖常见代码坏味道与重构手法。

查看详情

网格案例

Clean Code

Robert C. Martin

通过可读性与整洁性提升代码质量的实践指南。

Design Patterns

Erich Gamma et al.

GoF 经典设计模式详解与实践。

Refactoring

Martin Fowler

重构改善既有代码设计的系统方法。

查看详情

You Don't Know JS Yet

Kyle Simpson

The Pragmatic Programmer

Andrew Hunt & David Thomas

务实的程序员实践与思维方式。

Working Effectively with Legacy Code

Michael Feathers

author

作者名称。

Clean Code

Robert C. Martin

Unknown Masterpiece

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Clean Code"
  author="Robert C. Martin"
  cover={getExampleImage({ width: 240, height: 340 })}
/>

Clean Code

Robert C. Martin

Unknown Masterpiece

---
import { CardBook } from '@coffic/cosy-ui';
---

<CardBook title="Unknown Masterpiece" author="" />

class

自定义类名，用于覆盖默认样式。

Custom Class with Cover

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Custom Class with Cover"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  class="cosy:bg-gradient-to-r cosy:from-blue-50 cosy:to-indigo-100 cosy:border-2 cosy:border-blue-200"
/>

cover

书籍封面图（本地或远程）。当未提供时，将显示智能渐变背景占位。

Refactoring

Martin Fowler

Local Cover Example

Anon

No Cover Example

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<div>
  <CardBook
    title="Refactoring"
    author="Martin Fowler"
    cover={getExampleImage({ width: 240, height: 340 })}
  />
</div>

Refactoring

Martin Fowler

Local Cover Example

Anon

No Cover Example

Anon

---
import { CardBook } from '@coffic/cosy-ui';
import bookCover from '@/assets/book.png';
---

<CardBook title="Local Cover Example" author="Anon" cover={bookCover} />

Refactoring

Martin Fowler

Local Cover Example

Anon

No Cover Example

Anon

---
import { CardBook } from '@coffic/cosy-ui';
---

<CardBook title="No Cover Example" author="Anon" />

description

书籍简介文本。

Domain-Driven Design

Eric Evans

A comprehensive guide to domain-driven design, focusing on complex software projects.

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Domain-Driven Design"
  author="Eric Evans"
  cover={getExampleImage({ width: 240, height: 340 })}
  description="A comprehensive guide to domain-driven design, focusing on complex software projects."
/>

href

点击跳转链接（显示“查看详情”按钮）。

Refactoring

Martin Fowler

查看详情

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Refactoring"
  author="Martin Fowler"
  cover={getExampleImage({ width: 240, height: 340 })}
  href="/books/refactoring"
/>

shadow

卡片阴影样式：none | sm | md | lg | xl。

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow None"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="none"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow SM"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="sm"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow MD"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="md"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow LG"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="lg"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow XL"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="xl"
/>

size

卡片尺寸：sm | md | lg。

小册子

Anon

中等读物

Anon

巨著

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  size="sm"
  title="小册子"
  author="Anon"
  cover={getExampleImage({ width: 180, height: 260 })}
/>

小册子

Anon

中等读物

Anon

巨著

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  size="md"
  title="中等读物"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
/>

小册子

Anon

中等读物

Anon

巨著

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  size="lg"
  title="巨著"
  author="Anon"
  cover={getExampleImage({ width: 300, height: 420 })}
/>

title

书名（必填）。

Clean Code

Robert C. Martin

Patterns of Enterprise Application Architecture: Catalog of Patterns for Enterprise Software

Martin Fowler

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Clean Code"
  author="Robert C. Martin"
  cover={getExampleImage({ width: 240, height: 340 })}
/>

Clean Code

Robert C. Martin

Patterns of Enterprise Application Architecture: Catalog of Patterns for Enterprise Software

Martin Fowler

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Patterns of Enterprise Application Architecture: Catalog of Patterns for Enterprise Software"
  author="Martin Fowler"
  cover={getExampleImage({ width: 240, height: 340 })}
/>