gaogzhen
gaogzhen

vuetify学习第三天之布局-bars组件

vuetify学习第三天之布局-bars组件

目录

文章目录

    • 1、HLM布局
      • 1.1、简介
      • 1.2、隐藏效果图
      • 1.3、 布局分析
      • 1.4、 适用vuetify组件：
      • 1.5、实现代码
    • 2、header
      • 2.1、示例图片：
      • 2.2、源码：
      • 2.3、v-app-bar组件常用属性详解
      • 2.4、v-toolbar 组件详解
      • 2.5、 v-app-bar-nav-icon
      • 2.6、v-flex
      • 2.7、v-icon
      • 2.8、v-switch : 开关按钮
    • 3、left 详情见v-navagation-drawer组件文档
    • 4、main
    • 5、总结

内容

1、HLM布局

1.1、简介

    HLM,既header,left和main的缩写，为典型的整体布局之一。本例左侧采用固定定位，显示效果图：vuetify学习第三天之布局-bars组件_第1张图片

1.2、隐藏效果图

vuetify学习第三天之布局-bars组件_第2张图片

1.3、 布局分析

+ header : 头部
+ left： 左侧导航菜单
+ main： 内容主体

1.4、 适用vuetify组件：

+ header; v-app-bar
+ left-navagator: v-navigation-drawer
+ main: v-content
	+ 面包屑功能标题： v-breadcrumbs
	+ 具体功能子组件 :

1.5、实现代码