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)
| 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 |
| Segmented |
Single option selection from multiple |
el-segmented |
| Skeleton |
Loading placeholders |
el-skeleton |
| Statistic |
Numerical statistics display |
el-statistic |
| Table |
Data table with sorting and filtering |
el-table |
| TableV2 |
Virtualized table for large datasets |
el-table-v2 |
| Tag |
Labels and markers for categorization |
el-tag |
| Timeline |
Chronological event display |
el-timeline |
| Tree |
Hierarchical data display |
el-tree |
| TreeV2 |
Virtualized tree for large datasets |
el-tree-v2 |
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
