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 | Numeric input with increment controls | el-input-number |
| InputTag | Tag input for multi-value entry | el-input-tag |
| Mention | @mentions in text inputs | el-mention |
| Radio | Single selection from options | el-radio |
| Rate | Star rating functionality | el-rate |
| Select | Dropdown selection component | el-select |
| SelectV2 | Virtualized select for large datasets | el-select-v2 |
| Slider | Numeric range selection with dragging | el-slider |
| Switch | Toggle between two opposing states | el-switch |
| TimePicker | Time selection with various formats | el-time-picker |
| TimeSelect | Selection from fixed time options | el-time-select |
| Transfer | Dual-column list selection | el-transfer |
| TreeSelect | Tree-based dropdown selection | el-tree-select |
| Upload | File upload with drag-and-drop | el-upload |
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)
| 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 |
| Tour | Product tour and onboarding | el-tour |
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:
- 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
| 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
- 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