Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02

Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02

Link文字链接组件

1.文字链接组件的创建

  默认文字链接

2.文字链接组件的属性的使用

 默认文字链接
 默认文字链接

Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02_第1张图片

Layout(栅格)布局组件的使用

通过基础的24分栏,迅速简便的创建布局

在element-ui中布局组件将页面划分为多个行row,每行最多分为24栏

使用Layout组件


  占用8份
  占用8份
  占用8份

注意:属性值为非字符串类型时需要进行数据绑定在属性前加上":"

 

Layout属性的使用

行属性的使用

Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02_第2张图片

 


  
占用4份
 
占用4份
 
占用4份
 
占用4份
 
占用4份
 
占用4份

列属性的使用


  
占用8份
 
占用8份
 
占用8份

 

 

Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02_第3张图片

 

Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02_第4张图片

Container布局容器组件

创建布局容器(外层容器)


    

容器中包含的子元素

:顶栏容器。
​
:侧边栏容器。
​
:主要区域容器。
​
:底栏容器。
组件嵌套使用

      
      

我是标题

   
                 

我是菜单

     

我是中心内容

​    
     

我是页脚

可以通过direction属性设置容器为水平容器或者垂直容器

Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02_第5张图片

 

 

 

 

 

你可能感兴趣的:(前端框架之VUE,elementui)