Element-UI组件之导航Navigation

Element-UI组件之导航Navigation

  • NavMenu 导航菜单
    • 顶栏
    • 侧栏
    • 折叠
  • Tabs 标签页
    • 基础用法
    • 选项卡样式
    • 卡片化
    • 位置
    • 自定义标签页
    • 动态增减标签页
    • 自定义增加标签页触发器
  • Breadcrumb 面包屑
    • 基础用法
    • 图标分隔符
  • PageHeader 页头
    • 基础
  • Dropdown 下拉菜单
    • 基础用法
    • 触发对象
    • 触发方式
    • 菜单隐藏方式
    • 指令事件
    • 不同尺寸
  • Steps 步骤条
    • 基础用法
    • 含状态步骤条
    • 有描述的步骤条
    • 居中的步骤条
    • 带图标的步骤条
    • 竖式步骤条
    • 简洁风格的步骤条

NavMenu 导航菜单

顶栏

Element-UI组件之导航Navigation_第1张图片


  处理中心
  
    
    选项1
    选项2
    选项3
    
      
      选项1
      选项2
      选项3
    
  
  消息中心
  订单管理

处理中心 选项1 选项2 选项3 选项1 选项2 选项3 消息中心 订单管理

侧栏

Element-UI组件之导航Navigation_第2张图片


  
    
默认颜色
选项1 选项2 选项3 选项1 导航二 导航三 导航四
自定义颜色
选项1 选项2 选项3 选项1 导航二 导航三 导航四

折叠

Element-UI组件之导航Navigation_第3张图片
Element-UI组件之导航Navigation_第4张图片


  展开
  收起


  
    
    
      分组一
      选项1
      选项2
    
    
      选项3
    
    
      选项4
      选项1
    
  
  
    
    导航二
  
  
    
    导航三
  
  
    
    导航四
  





Tabs 标签页

基础用法

Element-UI组件之导航Navigation_第5张图片



选项卡样式

Element-UI组件之导航Navigation_第6张图片



卡片化

Element-UI组件之导航Navigation_第7张图片


  用户管理
  配置管理
  角色管理
  定时任务补偿

位置

Element-UI组件之导航Navigation_第8张图片



自定义标签页

Element-UI组件之导航Navigation_第9张图片


  
     我的行程
    我的行程
  
  消息中心
  角色管理
  定时任务补偿

动态增减标签页

在这里插入图片描述


  
    {{item.content}}
  


自定义增加标签页触发器

Element-UI组件之导航Navigation_第10张图片

add tab
{{item.content}}

Breadcrumb 面包屑

基础用法

Element-UI组件之导航Navigation_第11张图片


  首页
  活动管理
  活动列表
  活动详情

图标分隔符

Element-UI组件之导航Navigation_第12张图片


  首页
  活动管理
  活动列表
  活动详情

PageHeader 页头

基础

在这里插入图片描述





Dropdown 下拉菜单

基础用法

Element-UI组件之导航Navigation_第13张图片


  
    下拉菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



触发对象

Element-UI组件之导航Navigation_第14张图片


  
    更多菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  


  更多菜单
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  






触发方式

Element-UI组件之导航Navigation_第15张图片


  
    hover 激活
    
      
        下拉菜单
      
      
        黄金糕
        狮子头
        螺蛳粉
        双皮奶
        蚵仔煎
      
    
  
  
    click 激活
    
      
        下拉菜单
      
      
        黄金糕
        狮子头
        螺蛳粉
        双皮奶
        蚵仔煎
      
    
  



菜单隐藏方式

Element-UI组件之导航Navigation_第16张图片


  
    下拉菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



指令事件

在这里插入图片描述
在这里插入图片描述


  
    下拉菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  





不同尺寸

Element-UI组件之导航Navigation_第17张图片


  默认尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



  中等尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



  小型尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



  超小尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  

Steps 步骤条

基础用法

Element-UI组件之导航Navigation_第18张图片


  
  
  


下一步


含状态步骤条

Element-UI组件之导航Navigation_第19张图片


  
  
  

有描述的步骤条

在这里插入图片描述


  
  
  

居中的步骤条

Element-UI组件之导航Navigation_第20张图片


  
  
  
  

带图标的步骤条

Element-UI组件之导航Navigation_第21张图片



  
  
  

竖式步骤条

Element-UI组件之导航Navigation_第22张图片

简洁风格的步骤条

Element-UI组件之导航Navigation_第23张图片



  
  
  



  
  
  

你可能感兴趣的:(Element-UI组件之导航Navigation)