AsUI

Container容器

用于布局的容器组件，方便快速搭建页面的基本结构：

as-container：外层容器。当子元素中包含 as-header 或 as-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。

as-header：顶栏容器。

as-aside：侧边栏容器。

as-main：主要区域容器。

as-footer：底栏容器。

以上组件采用了flex布局,使用前请确定目标浏览器是否兼容。此外,as-container的子元素只能是后四者,后四者的父元素也只能是as-container。

# 基础布局

使用单一分栏创建基础的栅格布局。

Header Main Header Main Footer Aside Main Header Aside Main Header Aside Main Footer Aside Header Main Aside Header Main Footer
<template>
  <div class="t-basic-container-area">
    <as-container>
      <as-header>Header</as-header>
      <as-main>Main</as-main>
    </as-container>

    <as-container>
      <as-header>Header</as-header>
      <as-main>Main</as-main>
      <as-footer>Footer</as-footer>
    </as-container>

    <as-container>
      <as-aside>Aside</as-aside>
      <as-main>Main</as-main>
    </as-container>

    <as-container>
      <as-header>Header</as-header>
      <as-container>
        <as-aside>Aside</as-aside>
        <as-main>Main</as-main>
      </as-container>
    </as-container>

    <as-container>
      <as-header>Header</as-header>
      <as-container>
        <as-aside>Aside</as-aside>
        <as-container>
          <as-main>Main</as-main>
          <as-footer>Footer</as-footer>
        </as-container>
      </as-container>
    </as-container>

    <as-container>
      <as-aside>Aside</as-aside>
      <as-container>
        <as-header>Header</as-header>
        <as-main>Main</as-main>
      </as-container>
    </as-container>

    <as-container>
      <as-aside>Aside</as-aside>
      <as-container>
        <as-header>Header</as-header>
        <as-main>Main</as-main>
        <as-footer>Footer</as-footer>
      </as-container>
    </as-container>
  </div>
</template>

<script>
export default {
  name: "t-basic-container"
}
</script>

<style>
.t-basic-container-area .as-header, .as-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.t-basic-container-area .as-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
  width: 200px!important;
}

.t-basic-container-area .as-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body .t-basic-container-area > .as-container {
  margin-bottom: 40px;
}

.t-basic-container-area .as-container:nth-child(5) .as-aside,
.t-basic-container-area .as-container:nth-child(6) .as-aside {
  line-height: 260px;
}

.t-basic-container-area .as-container:nth-child(7) .as-aside {
  line-height: 320px;
}
@media screen and (max-width: 480px) {
  .t-basic-container-area .as-main {
    line-height: 80px;
  }
  body .t-basic-container-area > .as-container {
    margin-bottom: 20px;
  }
  .t-basic-container-area .as-container:nth-child(5) .as-aside,
  .t-basic-container-area .as-container:nth-child(6) .as-aside {
    line-height: 130px;
  }

  .t-basic-container-area .as-container:nth-child(7) .as-aside {
    line-height: 160px;
  }
  .t-basic-container-area .as-aside {
    line-height: 100px;
    width: 80px!important;
  }
}

</style>
Expand Copy

# Container Attributes

参数 默认值 说明
direction 子元素中有as-header或as-footer时为vertical,否则为 horizontal 子元素的排列方向,类型为String,可选值为horizontal/vertical。

# Header Attributes

参数 默认值 说明
height 60px 顶栏高度,类型为String。

# Aside Attributes

参数 默认值 说明
width 300px 侧边栏宽度,类型为String。
参数 默认值 说明
height 60px 底栏高度,类型为String。

← Color颜色 →