SuperAPI AI 工具集

element-plus-design-overview

前端与建站

查看项目

更新于 10-16 09:10

技能介绍

用途

Element Plus 组件总览(element-plus-design-overview)是一个快速参考技能,用于按类别浏览 Element Plus 提供的全部组件。当需要探索可用组件、快速查阅组件、理解组件分类或规划 UI 实现时,可以调用该技能。

主要能力

该技能按类别组织组件清单,并给出每个组件的简要说明。

基础组件(14 个)

Affix(将元素固定在特定可见区域)、Anchor(页面区块的锚点导航)、Avatar(图片、图标或字符形式的用户头像)、Backtop(返回顶部按钮)、Badge(元素上的数字或状态标记)、Breadcrumb(页面位置显示)、Button(多种类型的基础按钮)、Card(卡片容器中的信息)、Carousel(图片/文字轮播)、Collapse(可展开面板)、Divider(内容分隔线)、Icon(SVG 图标)、Link(文本超链接)、Text(带样式的文本显示)。

表单组件(24 个)

Autocomplete(输入建议)、Cascader(层级选择)、Checkbox(多选)、ColorPicker(颜色选择)、ColorPickerPanel(颜色选择面板)、DatePicker(日期选择)、DatePickerPanel(日期选择面板)、DateTimePicker(日期与时间选择)、Form(表单管理与校验)、Input(文本输入)、InputNumber(数字输入)、InputTag(标签输入)、Mention(输入框中的 @ 提及)、Radio(单选)、Rate(星级评分)、Select(下拉选择)、SelectV2(虚拟化选择)、Slider(范围滑块)、Switch(开关切换)、TimePicker(时间选择)、TimeSelect(固定时间选项)、Transfer(双栏选择)、TreeSelect(基于树的选择)、Upload(文件上传)。

数据展示组件(17 个)

Avatar(用户头像)、Badge(状态标记)、Calendar(日期展示)、Card(卡片容器)、Carousel(轮播)、Descriptions(键值对展示)、Empty(空状态占位)、Image(带预览的图片)、Pagination(分页导航)、Progress(进度指示)、Scrollbar(自定义滚动条)、Segmented(分段控件)、Skeleton(加载占位)、Statistic(数值统计)、Table(数据表格)、TableV2(虚拟化表格)、Tag(标签)、Timeline(时间线事件)、Tree(层级数据)、TreeV2(虚拟化树)。

导航组件(8 个)

Affix(粘性元素)、Anchor(页面导航)、Breadcrumb(位置显示)、Dropdown(下拉菜单)、Menu(导航菜单)、PageHeader(页面头部)、Steps(步骤引导)、Tabs(标签页内容)。

反馈组件(12 个)

Alert(警告消息)、Dialog(模态对话框)、Drawer(抽屉面板)、Loading(加载指示)、Message(轻提示消息)、MessageBox(模态警告)、Notification(角落通知)、Popconfirm(确认对话框)、Popover(富内容弹出框)、Result(结果页)、Tooltip(悬停提示)、Tour(产品引导)。

布局组件(4 个)

Container(布局容器)、Divider(内容分隔)、Space(元素间距)、Splitter(可调整大小的面板)。

工具组件(5 个)

ConfigProvider(全局配置)、InfiniteScroll(无限滚动)、Scrollbar(自定义滚动条)、Tour(产品引导)、Watermark(水印)。

设计资源

技能还提供设计资源参考:Border(边框样式、圆角、阴影)、Color(调色板与语义)、Layout(24 列栅格系统)、Typography(字体规范)。

相关技能

element-plus-components(带导航的详细组件索引)、element-plus-quickstart(安装与配置)、element-plus-theming(主题定制)、element-plus-i18n(国际化)。

使用方式

查阅详细组件文档时,导航至:./components/el-{name}/SKILL.md;查阅设计规范时,导航至:./element-plus-design-{name}/SKILL.md。

适用场景

探索可用组件、快速组件参考、理解组件分类、规划 UI 实现。

限制

资料未提供该技能的安装命令、收费方式、平台支持范围及具体使用效果等信息。