Element-UI组件之其他Others

Element-UI组件之其他Others

  • Dialog 对话框
    • 基本用法
    • 自定义内容
    • 嵌套的 Dialog
    • 居中布局
  • Tooltip 文字提示
    • 基础用法
    • 主题
    • 更多 Content
    • 高级扩展
  • Popover 弹出框
    • 基础用法
    • 嵌套信息
    • 嵌套操作
  • Card 卡片
    • 基础用法
    • 简单卡片
    • 带图片
    • 卡片阴影
  • Carousel 走马灯
    • 基础用法
    • 指示器
    • 切换箭头
    • 卡片化
    • 方向
  • Collapse 折叠面板
    • 基础用法
    • 手风琴效果
    • 自定义面板标题
  • Timeline 时间线
    • 基础用法
    • ⾃定义节点样式
    • ⾃定义时间戳
  • Divider 分割线
    • 基础用法
    • 设置文案
    • 垂直分割
  • Calendar 日历
    • 基本
    • 自定义内容
    • 自定义范围
  • Image 图片
    • 基础用法
    • 占位内容
    • 加载失败
    • 懒加载
  • Backtop 回到顶部
    • 基础用法
    • 自定义显示内容
  • InfiniteScroll 无限滚动
    • 基础用法
    • 禁用加载

Dialog 对话框

基本用法

Element-UI组件之其他Others_第1张图片
Element-UI组件之其他Others_第2张图片

点击打开 Dialog


  这是一段信息
  
    取 消
    确 定
  



在这里插入图片描述

自定义内容

在这里插入图片描述
Element-UI组件之其他Others_第3张图片
Element-UI组件之其他Others_第4张图片


打开嵌套表格的 Dialog


  
    
    
    
  



打开嵌套表单的 Dialog


  
    
      
    
    
      
        
        
      
    
  
  



嵌套的 Dialog

Element-UI组件之其他Others_第5张图片
Element-UI组件之其他Others_第6张图片




居中布局

Element-UI组件之其他Others_第7张图片
Element-UI组件之其他Others_第8张图片

点击打开 Dialog


  需要注意的是内容是默认不居中的
  
    取 消
    确 定
  



Element-UI组件之其他Others_第9张图片

Tooltip 文字提示

基础用法

Element-UI组件之其他Others_第10张图片

上左 上边 上右
左上 左边 左下
右上 右边 右下
下左 下边 下右

主题

Element-UI组件之其他Others_第11张图片


  Dark


  Light

更多 Content

Element-UI组件之其他Others_第12张图片


  
多行信息
第二行信息
Top center

高级扩展

Element-UI组件之其他Others_第13张图片



在这里插入图片描述

Popover 弹出框

基础用法

Element-UI组件之其他Others_第14张图片




嵌套信息

Element-UI组件之其他Others_第15张图片
Element-UI组件之其他Others_第16张图片


  
    
    
    
  
  click 激活



嵌套操作

Element-UI组件之其他Others_第17张图片


  

这是一段内容这是一段内容确定删除吗?

取消 确定
删除

Card 卡片

基础用法

Element-UI组件之其他Others_第18张图片


  
卡片名称 操作按钮
{{'列表内容 ' + o }}

简单卡片

Element-UI组件之其他Others_第19张图片


  
{{'列表内容 ' + o }}

带图片

Element-UI组件之其他Others_第20张图片


  
    
      ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zaGFkb3cuZWxlbWVjZG4uY29tL2FwcC9lbGVtZW50L2hhbWJ1cmdlci45Y2Y3YjA5MS01NWU5LTExZTktYTk3Ni03ZjRkMGIwN2VlZjYucG5n)
      
好吃的汉堡
操作按钮

卡片阴影

Element-UI组件之其他Others_第21张图片


  
    
      总是显示
    
  
  
    
      鼠标悬浮时显示
    
  
  
    
      从不显示
    
  

Carousel 走马灯

基础用法

Element-UI组件之其他Others_第22张图片




指示器

Element-UI组件之其他Others_第23张图片




切换箭头

Element-UI组件之其他Others_第24张图片




卡片化

Element-UI组件之其他Others_第25张图片




方向

Element-UI组件之其他Others_第26张图片




Collapse 折叠面板

基础用法

Element-UI组件之其他Others_第27张图片


  
    
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

手风琴效果

Element-UI组件之其他Others_第28张图片


  
    
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

自定义面板标题

Element-UI组件之其他Others_第29张图片


  
    
    
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

Timeline 时间线

基础用法

Element-UI组件之其他Others_第30张图片 Element-UI组件之其他Others_第31张图片

排序: 倒序 正序
{{activity.content}}

⾃定义节点样式

Element-UI组件之其他Others_第32张图片

{{activity.content}}

⾃定义时间戳

Element-UI组件之其他Others_第33张图片

更新 Github 模板

王小虎 提交于 2018/4/12 20:46

更新 Github 模板

王小虎 提交于 2018/4/3 20:46

更新 Github 模板

王小虎 提交于 2018/4/2 20:46

Divider 分割线

基础用法

Element-UI组件之其他Others_第34张图片


设置文案

Element-UI组件之其他Others_第35张图片


垂直分割

在这里插入图片描述


Calendar 日历

基本

Element-UI组件之其他Others_第36张图片





自定义内容

Element-UI组件之其他Others_第37张图片


  
  


自定义范围

Element-UI组件之其他Others_第38张图片



Image 图片

基础用法

Element-UI组件之其他Others_第39张图片

{{ fit }}

占位内容

Element-UI组件之其他Others_第40张图片

默认
自定义
加载中...

加载失败

Element-UI组件之其他Others_第41张图片

默认
自定义

懒加载

Element-UI组件之其他Others_第42张图片
Element-UI组件之其他Others_第43张图片

Backtop 回到顶部

基础用法

Element-UI组件之其他Others_第44张图片在这里插入图片描述


自定义显示内容

在这里插入图片描述


InfiniteScroll 无限滚动

基础用法

Element-UI组件之其他Others_第45张图片




禁用加载

Element-UI组件之其他Others_第46张图片




你可能感兴趣的:(Element-UI组件之其他Others)