メニュー
Card component for integrating information in a card container. Invoke when user needs to display grouped content, dashboard cards, or content sections with headers.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | el-card |
| description | Card component for integrating information in a card container. Invoke when user needs to display grouped content, dashboard cards, or content sections with headers. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Card component integrates information in a card container with optional header and footer.
<template>
<el-card>
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" text>Operation button</el-button>
</div>
</template>
Card content
</el-card>
</template>
<template>
<el-card>
Card content without header
</el-card>
</template>
<template>
<el-card :body-style="{ padding: '0px' }">
<img src="https://example.com/image.jpg" class="image" />
<div style="padding: 14px">
<span>Yummy hamburger</span>
<div class="bottom">
<time class="time">{{ currentDate }}</time>
<el-button text class="button">Operating</el-button>
</div>
</div>
</el-card>
</template>
<template>
<el-card shadow="always">Always show shadow</el-card>
<el-card shadow="hover">Show shadow on hover</el-card>
<el-card shadow="never">Never show shadow</el-card>
</template>
| Name | Description | Type | Default |
|---|---|---|---|
| header | Title of the card | string | — |
| footer | Footer of the card | string | — |
| body-style | CSS style of card body | CSSProperties | — |
| header-class | Custom class of card header | string | — |
| body-class | Custom class of card body | string | — |
| footer-class | Custom class of card footer | string | — |
| shadow | When to show card shadows | 'always' | 'never' | 'hover' | 'always' |
| Name | Description |
|---|---|
| default | Customize default content |
| header | Content of the Card header |
| footer | Content of the Card footer |
<template>
<el-card class="dashboard-card">
<template #header>
<div class="card-header">
<span>{{ title }}</span>
<el-button link type="primary">View All</el-button>
</div>
</template>
<div class="card-content">
<el-statistic :value="value" />
</div>
</el-card>
</template>
<script setup>
defineProps({
title: String,
value: Number
})
</script>
shadow="hover" for interactive cardsbody-style for custom paddingElement Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.
Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.