KCardPro

示例

Card Pro (Type 1)

Main content area with description and actions below.

Description section with extra details.

An advanced card component with type-based layout sections, responsive mobile controls, and a pagination area.

Props

Name	Type	Default	Description
type	'type1' | 'type2' | 'type3'	'type1'	Layout type controlling which sections are rendered and in what order.
bordered	boolean	false	Whether to add a visible border to the card.
class	string	—	Additional CSS classes for the root element.

Layout types:

• type1: descriptionArea, actionsArea, searchArea
• type2: statsArea, searchArea
• type3: descriptionArea, tabsArea, actionsArea, searchArea

Emits

Name	Parameters	Description
—	—	This component does not emit custom events.

Slots

Name	Description
default	Main card body content.
header	Card header area.
descriptionArea	Description section (type1, type3).
actionsArea	Actions section (type1, type3). Hidden on mobile with a toggle.
searchArea	Search section (all types). Hidden on mobile with a toggle.
statsArea	Statistics section (type2).
tabsArea	Tabs section (type3).
paginationArea	Pagination area at the bottom of the card.

Basic Usage

<script setup>
import { KCardPro } from '@kK-2004/ui-component'
</script>

<template>
  <KCardPro type="type1" bordered>
    <template #header>
      <h2>Users</h2>
    </template>
    <p>List of users goes here.</p>
    <template #actionsArea>
      <button>Add User</button>
    </template>
    <template #searchArea>
      <input type="text" placeholder="Search..." />
    </template>
  </KCardPro>
</template>