CardGrid 卡片网格

基本用法

卡片网格 可以实现卡片组合响应式的布局，可以根据需要调整列数。

Headers

Ever tried driving without GPS? Boom! That's why websites need headers for direction.

Content

Dive into the meat and potatoes of a site; without it, you'd just be window shopping. Content is king.

Call-to-Action

That enthusiastic friend who's always urging, "Do it! Do it!"? Yeah, that's this button nudging you towards adventure.

Pricing

Behold the dessert menu of the website world. Tempting choices await, can you resist?

<CardGrid
  columns={2}
  items={[
      {
        title: 'Headers',
        description: "Ever tried driving without GPS? Boom! That's why websites need headers for direction.",
        icon: 'flat-color-icons:template',
      },
      {
        title: 'Content',
        description:
          "Dive into the meat and potatoes of a site; without it, you'd just be window shopping. Content is king.",
        icon: 'flat-color-icons:document',
      },
      {
        title: 'Call-to-Action',
        description:
          'That enthusiastic friend who\'s always urging, "Do it! Do it!"? Yeah, that\'s this button nudging you towards adventure.',
        icon: 'flat-color-icons:advertising',
      },
      {
        title: 'Pricing',
        description: 'Behold the dessert menu of the website world. Tempting choices await, can you resist?',
        icon: 'flat-color-icons:currency-exchange',
      },
  ]}
  classes={{
    container: "gap-4 md:gap-6",
    panel:
      "shadow-[0_4px_30px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_30px_rgba(0,0,0,0.1)] dark:bg-slate-900",
    icon: "w-12 h-12 mb-6 text-primary",
  }}
/>

API

属性	说明	类型	默认值
items	配置项	Array	[]
columns	默认显示的卡片列数	number	-
defaultIcon	默认icon，当每项 item 没有设置icon时， defaultIcon生效	string	-
classes	组件样式	object

CardGrid.items

属性	说明	类型	默认值
title	标题	string	-
description	描述信息	string	-
icon	该项对应的icon图标，如果不设置 icon，则使用 defaultIcon	string	-
classes	同组件classes属性，推荐使用组件属性设置样式	object	-
callToAction	该项中<Button>组件的配置，继承自 Button 组件	object

CardGrid.classes

属性	说明	类型	默认值
container	CardGrid 组件容器的样式，即响应式容器的样式	string	-
panel	卡片面板的样式	string	-
title	作用于 CardGrid 组件 每一项的 title 的样式	string	-
description	作用于 CardGrid 组件 每一项的 description 的样式	string	-
icon	作用于 CardGrid 组件 每一项的 icon 的样式	string	-