ItemGrid 项目栅栏

基本用法

ItemGrid 组件一般使用在特性罗列、产品优势、用户指导、常见问题等场景，支持响应式。

E-commerce

Rutrum non odio at vehicula. Proin ipsum justo, dignissim in vehicula sit amet, dignissim id quam. Sed ac tincidunt sapien.

Blog

Nullam efficitur volutpat sem sed fringilla. Suspendisse et enim eu orci volutpat laoreet ac vitae libero.

Business

Morbi et elit finibus, facilisis justo ut, pharetra ipsum. Donec efficitur, ipsum quis congue luctus, mauris magna.

Branding

Suspendisse vitae nisi eget tortor luctus maximus sed non lectus. Cras malesuada pretium placerat. Nullam venenatis dolor a ante rhoncus.

<ItemGrid
  columns={2}
  items={[
    {
      title: "E-commerce",
      description:
        "Rutrum non odio at vehicula. Proin ipsum justo, dignissim in vehicula sit amet, dignissim id quam. Sed ac tincidunt sapien.",
      icon: "tabler:template",
    },
    {
      title: "Blog",
      description:
        "Nullam efficitur volutpat sem sed fringilla. Suspendisse et enim eu orci volutpat laoreet ac vitae libero.",
      icon: "tabler:template",
    },
    {
      title: "Business",
      description:
        "Morbi et elit finibus, facilisis justo ut, pharetra ipsum. Donec efficitur, ipsum quis congue luctus, mauris magna.",
      icon: "tabler:template",
    },
    {
      title: "Branding",
      description:
        "Suspendisse vitae nisi eget tortor luctus maximus sed non lectus. Cras malesuada pretium placerat. Nullam venenatis dolor a ante rhoncus.",
      icon: "tabler:template",
    },
  ]}
  classes={{
    container: 'mt-12',
    title: 'text-lg font-semibold',
    description: 'mt-0.5',
    icon: 'flex-shrink-0 mt-1 text-primary w-6 h-6',
  }}
/>

Why use?

Michael Knight a young loner on a crusade to champion the cause of the innocent.

How start?

Space, the final frontier. These are the voyages of the Starship Enterprise.

How to install?

Well, the way they make shows is, they make one show. That show's called a pilot.

What's something that you don't understand?

A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear.

What is something that you would like to try again?

A business big enough that it could be listed on the NASDAQ goes belly up.

what would that question be?

This is not about revenge. This is about justice. A lot of things can change in twelve years,

<ItemGrid
  items={[
    {
      title: 'Why use?',
      description:
        "Michael Knight a young loner on a crusade to champion the cause of the innocent.",
    },
    {
      title: 'How start?',
      description:
        'Space, the final frontier. These are the voyages of the Starship Enterprise. ',
    },
    {
      title: 'How to install?',
      description:
        "Well, the way they make shows is, they make one show. That show's called a pilot. ",
    },
    {
      title: "What's something that you don't understand?",
      description:
        "A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. ",
    },
    {
      title: 'What is something that you would like to try again?',
      description:
        "A business big enough that it could be listed on the NASDAQ goes belly up.",
    },
    {
      title: 'what would that question be?',
      description:
        "This is not about revenge. This is about justice. A lot of things can change in twelve years, ",
    }
  ]}
  columns={3}
  defaultIcon="tabler:chevron-right"
  classes={{
    container: `gap-y-8 md:gap-y-12`,
    panel: 'max-w-none',
    icon: 'flex-shrink-0 mt-1 w-6 h-6 text-primary',
  }}
/>

API

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

ItemGrid.items

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

ItemGrid.classes

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