VCard

The VCard component is a versatile and responsive component that is designed to display content in a concise and visually appealing manner. It can be used to present information, images, or actions. The Card component can be customized to include a header, footer, and/or collapse functionality.

Usage

Collapsible Card

When the collapse prop is present, the Card component internally uses the VAccordionItem to handle the collapsing and expanding behavior.

<template>
  <Card collapse>
    <template #header>
      <div class="flex items-center justify-between">
        <span class="text-xl font-bold">My Custom Card Title</span>
      </div>
    </template>
    This is my card content. You can add any text or other content here. The card content can be collapsed or expanded by clicking the header.
    <template #footer>
      <div class="flex justify-end">
        <button class="px-4 py-2 mr-2 text-white dark:bg-blue-600 bg-blue-400 rounded">Cancel</button>
        <button class="px-4 py-2 dark:text-white">Save</button>
      </div>
    </template>
  </Card>
</template>

Basic Card

<template>
  <Card header="Card Title">
    Card content goes here.
  </Card>
</template>

Card with Custom Header Slot

<template>
  <Card>
    <template #header>
      <div>Custom Card Title 🥳</div>
    </template>
    Card content goes here.
  </Card>
</template>

Card with Footer

<template>
  <Card header="Card Title">
    Card content goes here.
    <template #footer>
      Custom Card footer 🥳
    </template>
  </Card>
</template>

Configuration

The Card component can be configured using the CardConfig object. It includes a property called AccordionItem, which is a merged configuration object for the AccordionItem component. This will be used when the collapse prop is set to true. This allows you to customize the appearance and behavior of the AccordionItem used in the Card component.

Here the CardConfig interface:

export interface CardConfig extends DefaultConfig {
  AccordionItem?: Partial<AccordionItemConfig>,
  header?: {
    class?: MethodOrStringType,
    sizes?: MethodOrObject, // Contain all sizes key / value
    size?: MethodOrStringType,
  },
  content: {
    class?: MethodOrStringType,
    sizes?: MethodOrObject, // Contain all sizes key / value
    size?: MethodOrStringType,
  },
  footer: {
    class?: MethodOrStringType,
    sizes?: MethodOrObject, // Contain all sizes key / value
    size?: MethodOrStringType,
  }
}

The CardConfig preset configuration interface extends the DefaultConfig interface, which is explained in detail here.

The AccordionItem property is a partial AccordionItemConfig object that you can customize according to your needs. For more details on the AccordionItem configuration, refer to the AccordionItem documentation.