jiaiyan
- 311 skills
- 0 followers
- 8 repo stars
- 4 weeks ago last updated
- ▌ Van Submit Bar · jiaiyanSubmit bar component for displaying order amount and submitting orders. Invoke when user needs to implement checkout or order submission functionality.
- ▌ Van Swipe Cell · jiaiyanSwipe cell component for implementing swipe-to-reveal actions. Invoke when user needs to implement swipeable list items, delete/modify actions, or gesture-based cell interactions.
- ▌ Van Col Van Row · jiaiyanLayout components based on 24-column grid system. Invoke when user needs to create responsive layouts, grid systems, or align elements.
- ▌ Van Coupon List · jiaiyanCoupon list component for displaying, selecting, and exchanging coupons. Invoke when user needs to implement coupon selection or management functionality.
- ▌ Van Date Picker · jiaiyanDate picker component for selecting dates. Invoke when user needs to implement date selection with year, month, and day columns.
- ▌ Van Share Sheet · jiaiyanShare sheet component for displaying sharing options panel. Invoke when user needs to implement share functionality, social sharing menus, or content distribution interfaces.
- ▌ Van Time Picker · jiaiyanTime picker component for selecting time. Invoke when user needs to implement time selection, time range selection, or custom time formats.
- ▌ Van Tree Select · jiaiyanTree select component for selecting from hierarchical data. Invoke when user needs to implement category selection with parent-child structure.
- ▌ Use Click Away · jiaiyanComposable for detecting clicks outside of target elements. Invoke when implementing dropdowns, modals, popups, or any UI that needs to close when clicking outside.
- ▌ Use Count Down · jiaiyanComposable for managing countdown timers. Invoke when implementing countdown displays, verification code timers, or any time-based countdown functionality.
- ▌ Van Action Sheet · jiaiyanAction sheet component for displaying a bottom modal panel with multiple options. Invoke when user needs to implement action selection menus, option lists, or custom bottom panels.
- ▌ Van Address Edit · jiaiyanAddress editing component for creating, updating, and deleting receiving addresses. Invoke when user needs to implement address management functionality.
- ▌ Van Address List · jiaiyanAddress list component for displaying and managing multiple receiving addresses. Invoke when user needs to implement address selection or management functionality.
- ▌ Van Contact Card · jiaiyanContact card component for displaying contact information in card format. Invoke when user needs to implement contact selection or display functionality.
- ▌ Van Contact Edit · jiaiyanContact editing component for creating and updating contact information. Invoke when user needs to implement contact management functionality.
- ▌ Van Contact List · jiaiyanContact list component for displaying and managing contacts. Invoke when user needs to implement contact selection or management functionality.
- ▌ Van Picker Group · jiaiyanPicker group component for combining multiple pickers. Invoke when user needs to select multiple values from different pickers, like date and time together.
- ▌ Van Pull Refresh · jiaiyanPull refresh component for implementing pull-to-refresh functionality. Invoke when user needs to implement list refresh, page refresh, or pull-down loading interactions.
- ▌ Van Rolling Text · jiaiyanRolling text animation component for numbers and text. Invoke when user needs to create animated number counters, rolling text effects, or slot machine-style animations.
- ▌ Use Window Size · jiaiyanComposable for tracking browser window dimensions. Invoke when implementing responsive designs, layouts that adapt to window size, or components that need window dimensions.
- ▌ Van Dropdown Menu · jiaiyanDropdown menu component for displaying collapsible filter options. Invoke when user needs to implement dropdown filters, sorting options, or collapsible selection menus.
- ▌ Van Image Preview · jiaiyanImage preview component for displaying and zooming images. Invoke when user needs to implement image galleries, photo viewers, or image zoom functionality.
- ▌ El Tabs · jiaiyanTabs component for dividing data collections into different types. Invoke when user needs to create tabbed interfaces, dynamic tabs, or card-style tabs.
- ▌ El Text · jiaiyanText component for text display with styling options. Invoke when user needs to display styled text, truncated text, or text with semantic types.
- ▌ El Tour · jiaiyanTour component for guiding users through products. Invoke when user needs to create product tours, onboarding guides, or feature walkthroughs.
- ▌ El Tree · jiaiyanTree component for displaying hierarchical data with selection, filtering, and drag-drop support. Invoke when user needs to display folder structures, organization charts, category trees, or any hierarchical data with expandable nodes.
- ▌ El Affix · jiaiyanAffix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
- ▌ El Alert · jiaiyanAlert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
- ▌ El Badge · jiaiyanBadge component for displaying numbers or status marks on buttons and icons. Invoke when user needs to show notification counts, status indicators, or attention markers.
- ▌ El Empty · jiaiyanEmpty component for placeholder hints in empty states. Invoke when user needs to display empty data states, no results found, or placeholder content.
- ▌ El Image · jiaiyanImage component with lazy load, placeholder, and preview features. Invoke when user needs to display images with loading states, error handling, or preview functionality.
- ▌ El Input · jiaiyanInput component for text entry with multiple types, validation, and formatting. Invoke when user needs to implement text input, textarea, or password input.
- ▌ El Radio · jiaiyanRadio component for single selection among multiple options. Invoke when user needs to allow users to select one option from a list, create radio groups, or implement mutually exclusive choices.
- ▌ El Space · jiaiyanSpace component for consistent spacing between elements. Invoke when user needs to create consistent gaps between components, layout spacing, or element arrangement.
- ▌ El Steps · jiaiyanSteps component for guiding users through processes. Invoke when user needs to display step progress, wizard interfaces, or process workflows.
- ▌ El Table · jiaiyanTable component for displaying data with sorting, filtering, selection, and pagination. Invoke when user needs to display tabular data or implement data grid functionality.
- ▌ El Anchor · jiaiyanAnchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
- ▌ El Avatar · jiaiyanAvatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.
- ▌ El Button · jiaiyanButton component with various types, sizes, and styles. Invoke when user needs to implement buttons, button groups, or customize button appearance.
- ▌ El Dialog · jiaiyanDialog modal component for displaying content in a layer above the page. Invoke when user needs modal dialogs, confirmations, or form popups.
- ▌ El Drawer · jiaiyanDrawer component for displaying content in a slide-out panel. Invoke when user needs to create side panels, slide-out menus, or form drawers.
- ▌ El Result · jiaiyanResult component for feedback on operation results. Invoke when user needs to display success, error, warning, or info result pages with custom content.
- ▌ El Select · jiaiyanSelect dropdown component for single or multiple selection with filtering, remote search, and grouping. Invoke when user needs dropdown selection functionality.
- ▌ El Slider · jiaiyanSlider component for dragging within a fixed range. Invoke when user needs to select numeric values within a range, set volume/brightness, or filter by price range.
- ▌ El Switch · jiaiyanSwitch component for toggling between two opposing states. Invoke when user needs to enable/disable features, toggle settings, or switch between on/off states.
- ▌ El Upload · jiaiyanUpload component for file uploads via click or drag-and-drop. Invoke when user needs to upload files, images, or documents with preview, validation, and progress tracking.
- ▌ Element Plus Theming · jiaiyanHelps customize Element Plus themes using SCSS variables or CSS variables. Invoke when user needs to change theme colors, override styles, or create custom themes.
- ▌ El Backtop · jiaiyanBacktop component for back-to-top button. Invoke when user needs to provide quick navigation back to the top of a long page.
- ▌ El Divider · jiaiyanDivider component for separating content. Invoke when user needs to create visual separation between content sections, add horizontal or vertical dividers.
- ▌ El Loading · jiaiyanLoading component for showing animation while loading data. Invoke when user needs to display loading states, async operation feedback, or data fetching indicators.
- ▌ El Mention · jiaiyanMention component for mentioning users or items in input. Invoke when user needs to implement @mentions, user tagging, or item references in text inputs.
- ▌ El Message · jiaiyanMessage notification component for displaying feedback messages. Invoke when user needs to show success, warning, error, or info messages.
- ▌ El Popover · jiaiyanPopover component for displaying rich content in a popup. Invoke when user needs to show complex content, nested operations, or rich information in a popup.
- ▌ El Tooltip · jiaiyanTooltip component for displaying prompt information on mouse hover. Invoke when user needs to show hints, tips, or additional information on hover.
- ▌ El Tree V2 · jiaiyanVirtualized Tree component for large hierarchical datasets with blazing fast scrolling. Invoke when user needs to display large tree structures (1000+ nodes) with virtual scrolling for performance.
- ▌ El Calendar · jiaiyanCalendar component for displaying dates. Invoke when user needs to display a calendar view, select dates, or show scheduled events.
- ▌ El Carousel · jiaiyanCarousel component for looping images or texts in limited space. Invoke when user needs to display image sliders, content carousels, or rotating banners.
- ▌ El Cascader · jiaiyanCascader component for hierarchical option selection. Invoke when user needs to select from multi-level data like regions, categories, or organizational structures.
- ▌ El Checkbox · jiaiyanCheckbox component for multiple choice selection. Invoke when user needs to allow users to select multiple options from a list, create check-all functionality, or toggle between states.
- ▌ El Collapse · jiaiyanCollapse component for storing expandable content. Invoke when user needs to create accordion panels, FAQ sections, or collapsible content areas.
- ▌ El Dropdown · jiaiyanDropdown component for toggleable menus displaying lists of links and actions. Invoke when user needs to create dropdown menus, action menus, or context menus.
- ▌ El Progress · jiaiyanProgress component for showing operation progress and status. Invoke when user needs to display upload progress, task completion, or loading states.
- ▌ El Skeleton · jiaiyanSkeleton component for loading placeholders. Invoke when user needs to display loading states, content placeholders, or improve perceived loading performance.
- ▌ El Splitter · jiaiyanSplitter component for dividing areas horizontally or vertically. Invoke when user needs to create resizable panels, split views, or collapsible layouts.
- ▌ El Table V2 · jiaiyanVirtualized Table component for rendering massive data efficiently. Invoke when user needs to display large datasets with virtual scrolling for performance.
- ▌ El Timeline · jiaiyanTimeline component for visually displaying timeline activities. Invoke when user needs to display chronological events, activity history, or process logs.
- ▌ El Transfer · jiaiyanTransfer component for dual-column list selection. Invoke when user needs to move items between two lists, select multiple items from a large dataset, or manage permissions.
- ▌ Element Plus Dark Mode · jiaiyanEnables and customizes dark mode for Element Plus applications. Invoke when user needs to implement dark mode, toggle themes, or customize dark mode styles.
- ▌ El Container · jiaiyanContainer components for scaffolding basic page structure with header, aside, main, and footer sections. Invoke when user needs to create page layouts.
- ▌ El Input Tag · jiaiyanInputTag component for adding content as tags. Invoke when user needs to create tag inputs, multi-value inputs, or keyword/tag entry fields.
- ▌ El Scrollbar · jiaiyanScrollbar component for custom scrollbars. Invoke when user needs to replace native scrollbars, create custom scroll areas, or implement infinite scrolling.
- ▌ El Segmented · jiaiyanSegmented component for single option selection from multiple options. Invoke when user needs to create radio-style button groups, tab-like controls, or option switches.
- ▌ El Select V2 · jiaiyanVirtualized Select component for large datasets. Invoke when user needs to select from thousands of options with virtual scrolling for performance.
- ▌ El Statistic · jiaiyanStatistic component for displaying numerical statistics. Invoke when user needs to display counts, amounts, rankings, or countdown timers.
- ▌ El Watermark · jiaiyanWatermark component for adding text or pattern watermarks. Invoke when user needs to protect content, brand documents, or add copyright notices.
- ▌ Element Plus Components · jiaiyanElement 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.
- ▌ Element Plus Quickstart · jiaiyanHelps set up and configure Element Plus in Vue 3 projects. Invoke when user needs to install, import, or configure Element Plus in a new or existing project.
- ▌ El Breadcrumb · jiaiyanBreadcrumb component for displaying the location of the current page. Invoke when user needs to show navigation paths, page hierarchy, or enable easier browsing back.
- ▌ El Pagination · jiaiyanPagination component for splitting large datasets into pages. Invoke when user needs to display paginated data, navigate through pages, or control page size and current page.
- ▌ El Popconfirm · jiaiyanPopconfirm component for simple confirmation dialogs. Invoke when user needs to confirm actions before execution, like delete operations or irreversible actions.
- ▌ El Date Picker · jiaiyanDatePicker component for date input. Invoke when user needs to select dates, date ranges, months, years, or datetime values.
- ▌ El Message Box · jiaiyanMessageBox component for modal dialogs simulating system alerts, confirms, and prompts. Invoke when user needs to show alert messages, confirm actions, or prompt for user input.
- ▌ El Page Header · jiaiyanPageHeader component for page navigation headers. Invoke when user needs to create page headers with back navigation, breadcrumbs, or title sections.
- ▌ El Time Picker · jiaiyanTimePicker component for time input. Invoke when user needs to select time values, time ranges, or limit time selections.
- ▌ El Time Select · jiaiyanTimeSelect component for selecting from fixed time options. Invoke when user needs to select from predefined time slots or schedule times.
- ▌ El Tree Select · jiaiyanTreeSelect component combining Tree and Select functionality. Invoke when user needs to select from hierarchical data in a dropdown, like organization structures or category trees.
- ▌ Element Plus Design Color · jiaiyanColor design specifications for Element Plus. Invoke when user needs to understand the color palette, main colors, secondary colors, or neutral colors used in Element Plus.
- ▌ El Autocomplete · jiaiyanAutocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
- ▌ El Color Picker · jiaiyanColorPicker component for color selection. Invoke when user needs to select colors, set theme colors, or customize color values.
- ▌ El Descriptions · jiaiyanDescriptions component for displaying multiple fields in list form. Invoke when user needs to display detailed information, product specifications, or profile data.
- ▌ El Input Number · jiaiyanInputNumber component for numeric input with controls. Invoke when user needs to input numbers with increment/decrement buttons, set numeric ranges, or enforce numeric input.
- ▌ El Notification · jiaiyanNotification component for displaying notification messages at the corner of the page. Invoke when user needs to show persistent notifications with custom content.
- ▌ Element Plus Design Border · jiaiyanBorder design specifications for Element Plus components. Invoke when user needs to understand border styles, radius options, or shadow styles used throughout Element Plus.
- ▌ Element Plus Design Layout · jiaiyanLayout grid system for Element Plus using 24-column grid. Invoke when user needs to create responsive layouts, grid systems, or understand Row and Col components.
- ▌ Element Plus Design Overview · jiaiyanOverview of all Element Plus components organized by category. Invoke when user needs a quick reference to all available components or wants to explore the component library.
- ▌ El Config Provider · jiaiyanConfigProvider component for global configuration. Invoke when user needs to configure global settings, i18n, theme, or component defaults.
- ▌ El Datetime Picker · jiaiyanDateTimePicker component for selecting date and time together. Invoke when user needs to select both date and time in a single picker.
- ▌ El Infinite Scroll · jiaiyanInfiniteScroll directive for loading more data when scrolling to bottom. Invoke when user needs to implement infinite scrolling, lazy loading, or pagination on scroll.
- ▌ Element Plus Design Typography · jiaiyanTypography design specifications for Element Plus. Invoke when user needs to understand font conventions, font-family settings, or text styling guidelines.
- ▌ El Date Picker Panel · jiaiyanDatePickerPanel is the core panel component of DatePicker for custom date selection UI. Invoke when user needs to build custom date picker interfaces without the dropdown wrapper.