element-ui展示

展示了element-ui的相应组件的功能及UI,以便快速浏览查询。

Transition 过渡动画

transition。内置了几种过渡动画。

Layout 布局

el-row el-col。通过基础的 24 分栏,迅速简便地创建布局。

element-ui展示_第1张图片

Container 布局容器

el-container。用于布局的容器组件,方便快速搭建页面的基本结构。

element-ui展示_第2张图片

Icon 图标

i。提供了一套常用的图标集合。

Button 按钮

el-button。常用的操作按钮。

Link 文字链接

el-link。文字超链接。

Radio 单选框

el-radio。在一组备选项中进行单选。

Checkbox 多选框

el-checkbox。一组备选项中进行多选。

element-ui展示_第3张图片

Input 输入框

el-input。通过鼠标或键盘输入字符。

element-ui展示_第4张图片

InputNumber 计数器

el-input-number。仅允许输入标准的数字值,可定义范围。

Select 选择器

el-select。当选项过多时,使用下拉菜单展示并选择内容。

element-ui展示_第5张图片
单选

element-ui展示_第6张图片
多选

element-ui展示_第7张图片
自定义

Cascader 级联选择器

el-cascader。当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

element-ui展示_第8张图片
单选

element-ui展示_第9张图片
多选

element-ui展示_第10张图片
自定义

Switch 开关

el-switch。表示两种相互对立的状态间的切换,多用于触发「开/关」。

Slider 滑块

el-slider。通过拖动滑块在一个固定区间内进行选择。

element-ui展示_第11张图片

TimePicker 时间选择器

el-time-picker。用于选择或输入日期。

element-ui展示_第12张图片
固定时间

element-ui展示_第13张图片
任意时间

element-ui展示_第14张图片
时间范围

DatePicker 日期选择器

el-date-picker。用于选择或输入日期。

element-ui展示_第15张图片
日期

element-ui展示_第16张图片
日期范围

element-ui展示_第17张图片
日期时间

element-ui展示_第18张图片
日期时间范围

Upload 上传

el-upload。通过点击或者拖拽上传文件。

element-ui展示_第19张图片

Rate 评分

el-rate。评分组件。

element-ui展示_第20张图片

ColorPicker 颜色选择器

el-color-picker。用于颜色选择,支持多种格式。

element-ui展示_第21张图片

Transfer 穿梭框

el-transfer。用于多次选择,统一确定的组件。

element-ui展示_第22张图片
默认

element-ui展示_第23张图片
自定义

Form 表单

el-form.由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据.

Table 表格

el-table。用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

element-ui展示_第24张图片

Tag 标签

el-tag。用于标记和选择。

Progress 进度条

el-progress。用于展示操作进度,告知用户当前状态和预期。

element-ui展示_第25张图片

Tree 树形控件

el-tree。用清晰的层级结构展示信息,可展开或折叠。

element-ui展示_第26张图片

Pagination 分页

el-pagination。当数据量过多时,使用分页分解数据。

element-ui展示_第27张图片

Badge 标记

el-badge。出现在按钮、图标旁的数字或状态标记。

Avatar 头像

el-avatar。用图标、图片或者字符的形式展示用户或事物信息。

Alert 警告

el-alert。用于页面中展示重要的提示信息。

element-ui展示_第28张图片

Loading 加载

$loading。加载数据时显示动效。

element-ui展示_第29张图片

Notification 通知

$notify。悬浮出现在页面角落,显示全局的通知提醒消息。

element-ui展示_第30张图片

Message 消息提示

$message。常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

element-ui展示_第31张图片

MessageBox 弹框

$msgbox。模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。

element-ui展示_第32张图片

element-ui展示_第33张图片

element-ui展示_第34张图片

element-ui展示_第35张图片

NavMenu 导航菜单

el-menu。为网站提供导航功能的菜单。

element-ui展示_第36张图片

element-ui展示_第37张图片

Tabs 标签页

el-tabs。分隔内容上有关联但属于不同类别的数据集合。

element-ui展示_第38张图片

Breadcrumb 面包屑

el-breadcrumb。显示当前页面的路径,快速返回之前的任意页面。

PageHeader 页头

el-page-header。如果页面的路径比较简单,推荐使用页头组件而非面包屑组件。

Dropdown 下拉菜单

el-dropdown。将动作或菜单折叠到下拉菜单中。

element-ui展示_第39张图片

Steps 步骤条

el-steps。引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。

element-ui展示_第40张图片

Dialog 对话框

el-dialog。在保留当前页面状态的情况下,告知用户并承载相关操作。

默认

element-ui展示_第41张图片

element-ui展示_第42张图片
自定义

Tooltip 文字提示

el-tooltip。常用于展示鼠标 hover 时的提示信息。

element-ui展示_第43张图片

element-ui展示_第44张图片

Popover 弹出框

el-popover。Popover与Tooltip很类似,相当于能自定义的Tooltip。

element-ui展示_第45张图片
默认

element-ui展示_第46张图片
自定义

Popconfirm 气泡确认框

el-popconfirm。点击元素,弹出气泡确认框。相当于一个已自定义的Popover。

element-ui展示_第47张图片

Card 卡片

el-card。将信息聚合在卡片容器中展示。

element-ui展示_第48张图片

Carousel 走马灯

el-carousel。在有限空间内,循环播放同一类型的图片、文字等内容。

element-ui展示_第49张图片

Collapse 折叠面板

el-collapse。通过折叠面板收纳内容区域。

element-ui展示_第50张图片

Timeline 时间线

el-timeline。可视化地呈现时间流信息。

element-ui展示_第51张图片

Divider 分割线

el-divider。区隔内容的分割线。

element-ui展示_第52张图片

Calendar 日历

el-calendar。显示日期。

element-ui展示_第53张图片

Image 图片

el-image。图片容器,在保留原生img的特性下,支持懒加载,自定义占位、加载失败等。

element-ui展示_第54张图片

Backtop 回到顶部

el-backtop。返回页面顶部的操作按钮。

element-ui展示_第55张图片

InfiniteScroll 无限滚动

ul。滚动至底部时,加载更多数据。

element-ui展示_第56张图片

Drawer 抽屉

el-drawer。有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。

element-ui展示_第57张图片

你可能感兴趣的:(element-ui展示)