| 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)
Data Display Components (17)
Navigation Components (6)
Feedback Components (12)
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)
How to Use Component Skills
Each component skill file contains:
- Component Overview: Description and use cases
- Basic Usage: Simple code examples
- API Reference: Attributes, events, slots, and exposes
- Common Patterns: Real-world usage examples
- Best Practices: Recommended usage guidelines
- 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
Best Practices
- Use TypeScript: Enable type definitions for better IDE support
- On-demand Import: Use unplugin for automatic component import
- Form Validation: Use async-validator for complex validation rules
- Accessibility: Use proper ARIA attributes and labels
- Performance: Use virtualized components (TableV2, TreeV2, SelectV2) for large datasets
- Consult Specific Skills: Always refer to the dedicated component skill file for detailed API documentation
