当前位置:首页>ElementUI>ElementUI教程

ElementUI教程

作者:微学网发布时间:2019-08-10 22:15:02

什么是ElementUI

  • Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型。

  • ElementUI框架,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心,在github 上超高的star早已说明一切,用于开发PC端的页面还是绰绰有余的,如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者。

  • ElementUI是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

ElementUI设计原则

一致性 Consistency

  • 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;

  • 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

反馈 Feedback

  • 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;

  • 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  • 简化流程:设计简洁直观的操作流程;

  • 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;

  • 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

可控 Controllability

  • 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;

  • 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

ElementUI组件

基本组件

  • Layout 布局

  • Container 布局容器

  • Color 色彩

  • Typography 字体

  • Border 边框

  • Icon 图标

  • Button 按钮

  • Link 文字链接

Form表单

  • Radio 单选框

  • Checkbox 多选框

  • Input 输入框

  • InputNumber 计数器

  • Select 选择器

  • Cascader 级联选择器

  • Switch 开关

  • Slider 滑块

  • TimePicker 时间选择器

  • DatePicker 日期选择器

  • DateTimePicker 日期时间选择器

  • Upload 上传

  • Rate 评分

  • ColorPicker 颜色选择器

  • Transfer 穿梭框

  • Form 表单

Data

  • Table 表格

  • Tag 标签

  • Progress 进度条

  • Tree 树形控件

  • Pagination 分页

  • Badge 标记

  • Avatar 头像

Notice

  • Alert 警告

  • Loading 加载

  • Message 消息提示

  • MessageBox 弹框

  • Notification 通知

Navigation

  • NavMenu 导航菜单

  • Tabs 标签页

  • Breadcrumb 面包屑

  • PageHeader 页头

  • Dropdown 下拉菜单

  • Steps 步骤条

Others

  • Dialog 对话框

  • Tooltip 文字提示

  • Popover 弹出框

  • Card 卡片

  • Carousel 走马灯

  • Collapse 折叠面板

  • Timeline 时间线

  • Divider 分割线

  • Calendar calendar

  • Image 图片

  • Backtop 回到顶部

  • InfiniteScroll 无限滚动

  • Drawer 抽屉