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

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

Link文字链接组件

1.文字链接组件的创建

  <el-link>默认文字链接</el-link>

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

 <el-link type="success" href="http://www.baidu.com">默认文字链接</el-link>
 <el-link type="primary" :underline="false">默认文字链接</el-link>

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

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

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

使用Layout组件

<el-row>
  <el-col :span="8">占用8份</el-col>
  <el-col :span="8">占用8份</el-col>
  <el-col :span="8">占用8份</el-col>
</el-row>

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

Layout属性的使用

行属性的使用

​

<el-row>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
</el-row>

列属性的使用

<el-row>
  <el-col :span="8" :offset="4" :push="3"><div style="border: 1px red solid">占用8份</div></el-col>
  <el-col :span="8"><div style="border: 1px red solid">占用8份</div></el-col>
  <el-col :span="8"><div style="border: 1px red solid">占用8份</div></el-col>
</el-row>

Container布局容器组件

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

<el-container>
    
</el-container>

容器中包含的子元素

<el-header>：顶栏容器。
​
<el-aside>：侧边栏容器。
​
<el-main>：主要区域容器。
​
<el-footer>：底栏容器。

组件嵌套使用

<el-container>
      <!--头部-->
      <el-header><div style="border: 1px red solid"><h1>我是标题</h1></div></el-header>
    </el-container>
      <el-container>
      <!--左侧头部-->
      <el-aside><div style="border: 1px red solid"><h1>我是菜单</h1></div></el-aside>
      <el-main><div style="border: 1px red solid"><h1>我是中心内容</h1></div></el-main>
​
    </el-container>
      <el-footer><div style="border: 1px red solid"><h1>我是页脚</h1></div></el-footer>

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