skills.rest
wepn13232
wepn13232COMMUNITY
Explore all skills by this author →
GitHub

element-plus-badge

Document Element Plus Badge component attributes and slots for Vue UI projects.

7|Updated Mar 31, 2026
Search Tags:#documentation#api#vue#component#badge#element-plus#el-badge
One-click install
npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-badge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: element-plus-badge
Source: https://github.com/wepn13232/element-plus-skills/tree/main/badge
Command: npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-badge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill centralizes the Element Plus Badge component API so you no longer have to search through docs when building badges or checking slot names.

Core Features & Use Cases

  • Attribute breakdown of value, max, is-dot, offset, and other props to guide badge display logic.
  • Slot guidance for default and content slots so you can customize badges for notifications or stats.
  • Documentation reference linking to the official docs for deeper exploration before coding.

Quick Start

Ask Claude Code to explain el-badge attributes and slot usage for a specific layout.

Frequently Asked Questions about element-plus-badge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize the el-badge display value and max count in Vue?▼

To customize el-badge display logic in Vue, use the `value` attribute for content and the `max` attribute to cap the count, automatically showing max+ when exceeded.

What slots are available for custom content in Element Plus Badge?▼

Element Plus Badge provides a default slot and a `content` slot, allowing you to inject custom Vue components or markup for notifications and statistics instead of standard numeric displays.

How do I display a status dot instead of a number using el-badge?▼

To display a status dot using el-badge, set the `is-dot` boolean attribute to true, rendering a small dot without numeric value for subtle notification indicators.

Can I adjust the badge offset position relative to its target element?▼

Yes, you can adjust the el-badge offset position using the `offset` attribute, specifying coordinates to shift the badge relative to its wrapping target element for precise UI alignment.

What is the difference between the default slot and the content slot in el-badge?▼

In el-badge, the default slot wraps the target element the badge attaches to, while the `content` slot allows you to customize the badge's actual display content for complex notifications.

Related Skills

Explore More Software Engineering Skills→
chrysaliscatchrysaliscat
1

Frontend Expert

Guide Vue.js 2.x and Element UI development within the RuoYi-Vue framework.

Community
Intermediate
googlegoogle
455

uiblocks

Design interactive 3D user interfaces for XR Blocks with Three.js and uikit.

Official
Advanced
jiaiyanjiaiyan
21

el-progress

Display task progress with Element Plus el-progress component attributes.

Community
Intermediate
jiaiyanjiaiyan
8

n-badge

Display counts and status indicators on Vue 3 UI elements with Naive UI badges.

Community
Intermediate