element-plus-components

name	element-plus-components
description	Element Plus component overview and navigation index. Invoke when user needs to browse all available components, find specific component categories, or navigate to detailed component skill files.
metadata	{"author":"jiaiyan","version":"1.0.0"}

Element Plus Components Overview

This skill provides a comprehensive index of all Element Plus components with navigation to their dedicated skill files for detailed API documentation.

When to Invoke

• Browse all available components
• Find components by category
• Navigate to specific component skill files
• Get an overview of component capabilities

---

Component Index (77 Components)

All components listed below have dedicated skill files located at:

./components/el-{name}/SKILL.md

---

Basic Components (14)

Component	Description	Skill File
Affix	Fixes elements to a specific visible area for sticky navigation	el-affix
Anchor	Anchor navigation for quick page section navigation	el-anchor
Avatar	Displays user avatars with images, icons, or characters	el-avatar
Backtop	Back-to-top button for long page navigation	el-backtop
Badge	Displays numbers or status marks on buttons and icons	el-badge
Breadcrumb	Displays page location for easier navigation	el-breadcrumb
Button	Basic button with various types, sizes, and styles	el-button
Card	Integrates information in a card container	el-card
Carousel	Loops images or texts in limited space	el-carousel
Collapse	Stores content in expandable panels	el-collapse
Divider	Creates dividing lines between content	el-divider
Icon	SVG icons with customizable size and color	el-icon
Link	Text hyperlinks with various styles	el-link
Text	Styled text display with truncation support	el-text

---

Form Components (24)

Component	Description	Skill File
Autocomplete	Input suggestions based on user input	el-autocomplete
Cascader	Hierarchical option selection	el-cascader
Checkbox	Multiple choice selection	el-checkbox
ColorPicker	Color selection with multiple formats	el-color-picker
ColorPickerPanel	Core panel for custom color picker UI	el-color-picker-panel
DatePicker	Date selection with various types	el-date-picker
DatePickerPanel	Core panel for custom date picker UI	el-date-picker-panel
DateTimePicker	Combined date and time selection	el-datetime-picker
Form	Form management and validation	el-form
Input	Text input with various configurations	el-input
InputNumber

---

Data Display Components (17)

Component	Description	Skill File
Avatar	User avatars with images, icons, or characters	el-avatar
Badge	Numbers or status marks on elements	el-badge
Calendar	Date display with events	el-calendar
Card	Information in card containers	el-card
Carousel	Image/text carousels	el-carousel
Descriptions	Multiple fields in list form	el-descriptions
Empty	Placeholder hints for empty states	el-empty
Image	Images with lazy load and preview	el-image
Pagination	Page navigation for large datasets	el-pagination
Progress	Operation progress visualization	el-progress
Scrollbar	Custom scrollbar styling	el-scrollbar

---

Navigation Components (6)

Component	Description	Skill File
Affix	Sticky navigation elements	el-affix
Anchor	Page anchor navigation	el-anchor
Breadcrumb	Page location display	el-breadcrumb
Dropdown	Toggleable dropdown menus	el-dropdown
Menu	Navigation menu system	el-menu
PageHeader	Page navigation headers	el-page-header
Steps	Step-by-step process guide	el-steps
Tabs	Tabbed content organization	el-tabs

---

Feedback Components (12)

Component	Description	Skill File
Alert	Non-dismissible alert messages	el-alert
Dialog	Modal dialog boxes	el-dialog
Drawer	Slide-out panel	el-drawer
Loading	Loading animation overlay	el-loading
Message	Toast notification messages	el-message
MessageBox	Modal alerts, confirms, prompts	el-message-box
Notification	Corner notification popups	el-notification
Popconfirm	Simple confirmation dialogs	el-popconfirm
Popover	Rich content popups	el-popover
Result	Operation result feedback	el-result
Tooltip	Hover tooltip information	el-tooltip

---

Layout Components (4)

Component	Description	Skill File
Container	Layout containers (header, aside, main, footer)	el-container
Divider	Content separation lines	el-divider
Space	Consistent spacing between elements	el-space
Splitter	Resizable split panels	el-splitter

---

Utility Components (5)

Component	Description	Skill File
ConfigProvider	Global configuration wrapper	el-config-provider
InfiniteScroll	Infinite scrolling directive	el-infinite-scroll
Scrollbar	Custom scrollbar styling	el-scrollbar
Tour	Product tour and onboarding guide	el-tour
Watermark	Text or pattern watermarks	el-watermark

---

How to Use Component Skills

Each component skill file contains:

1. Component Overview: Description and use cases
2. Basic Usage: Simple code examples
3. API Reference: Attributes, events, slots, and exposes
4. Common Patterns: Real-world usage examples
5. Best Practices: Recommended usage guidelines
6. Component Interactions: How components work together

Navigation Example

To access detailed documentation for a specific component:

For Button component:
→ Navigate to: ./components/el-button/SKILL.md

For Form component:
→ Navigate to: ./components/el-form/SKILL.md

---

Quick Reference by Use Case

Building Forms

• Form - Form container with validation
• Input - Text input fields
• Select - Dropdown selections
• Checkbox - Multiple selections
• Radio - Single selections
• DatePicker - Date inputs
• Upload - File uploads

Displaying Data

• Table - Data tables
• Pagination - Page navigation
• Tree - Hierarchical data
• Descriptions - Key-value displays
• Statistic - Numeric statistics

User Feedback

• Message - Toast notifications
• Notification - Corner alerts
• Dialog - Modal dialogs
• Alert - Page alerts
• Loading - Loading states

Navigation

• Menu - Navigation menus
• Tabs - Tabbed content
• Breadcrumb - Location display
• Dropdown - Dropdown menus

Layout

• Container - Page structure
• Space - Element spacing
• Divider - Content separation
• Splitter - Resizable panels

---

Related Skills

Skill	Description	Path
element-plus-quickstart	Installation and configuration	element-plus-quickstart
element-plus-theming	Theme customization	element-plus-theming
element-plus-i18n	Internationalization	element-plus-i18n
element-plus-dark-mode	Dark mode implementation	element-plus-dark-mode
element-plus-ssr	Server-side rendering	element-plus-ssr

---

Best Practices

1. Use TypeScript: Enable type definitions for better IDE support
2. On-demand Import: Use unplugin for automatic component import
3. Form Validation: Use async-validator for complex validation rules
4. Accessibility: Use proper ARIA attributes and labels
5. Performance: Use virtualized components (TableV2, TreeV2, SelectV2) for large datasets
6. Consult Specific Skills: Always refer to the dedicated component skill file for detailed API documentation