メニュー
Badge component for displaying numbers or status marks on buttons and icons. Invoke when user needs to show notification counts, status indicators, or attention markers.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Element 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.
| name | el-badge |
| description | Badge component for displaying numbers or status marks on buttons and icons. Invoke when user needs to show notification counts, status indicators, or attention markers. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Badge component displays a number or status mark on buttons and icons for notifications and status indicators.
<template>
<el-badge :value="12" class="item">
<el-button>comments</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button>replies</el-button>
</el-badge>
</template>
<template>
<el-badge :value="200" :max="99" class="item">
<el-button>comments</el-button>
</el-badge>
</template>
<template>
<el-badge value="new" class="item">
<el-button>comments</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button>replies</el-button>
</el-badge>
</template>
<template>
<el-badge is-dot class="item">
<el-button>query</el-button>
</el-badge>
<el-badge is-dot class="item">
<el-icon><Bell /></el-icon>
</el-badge>
</template>
<template>
<el-badge :value="5" :offset="[10, 10]">
<el-button>Offset badge</el-button>
</el-badge>
</template>
| Name | Description | Type | Default |
|---|---|---|---|
| value | Display value | string | number | '' |
| max | Maximum value, shows {max}+ when exceeded | number | 99 |
| is-dot | Display as a dot | boolean | false |
| hidden | Hidden badge | boolean | false |
| type | Badge type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'danger' |
| show-zero | Show badge when value is zero | boolean | true |
| color | Background color of the dot | string | — |
| offset | Offset of badge | [number, number] | [0, 0] |
| badge-style | Custom style of badge | CSSProperties | — |
| badge-class | Custom class of badge | string | — |
| Name | Description | Type |
|---|---|---|
| default | Customize default content | — |
| content | Customize badge content | { value: string } |
<template>
<el-badge :value="unreadCount" :hidden="unreadCount === 0">
<el-icon><Bell /></el-icon>
</el-badge>
</template>
<script setup>
import { ref } from 'vue'
const unreadCount = ref(5)
</script>
max to prevent large numbers from overflowingis-dot for simple status indicatorshidden when count is zero and show-zero is false