Appearance

Return to top
On this page

Container 布局容器

基本使用

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

<n-container>：外层容器

<n-header>：顶栏容器

<n-aside>：侧边栏容器

<n-main>：主要区域容器

<n-footer>：底栏容器

常见页面布局

Header
Main

Header
Main
Footer

Main

Header
Main

Header
Main
Footer

Header
Main

Header
Main
Footer
显示代码
vue
<template>
  <n-container>
    <n-header>Header</n-header>
    <n-main>Main</n-main>
  </n-container>

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

  <n-container>
    <n-aside width="200px">Aside</n-aside>
    <n-main>Main</n-main>
  </n-container>

  <n-container>
    <n-header>Header</n-header>
    <n-container>
      <n-aside width="200px">Aside</n-aside>
      <n-main>Main</n-main>
    </n-container>
  </n-container>

  <n-container>
    <n-header>Header</n-header>
    <n-container>
      <n-aside width="200px">Aside</n-aside>
      <n-container>
        <n-main>Main</n-main>
        <n-footer>Footer</n-footer>
      </n-container>
    </n-container>
  </n-container>

  <n-container>
    <n-aside width="200px">Aside</n-aside>
    <n-container>
      <n-header>Header</n-header>
      <n-main>Main</n-main>
    </n-container>
  </n-container>

  <n-container>
    <n-aside width="200px">Aside</n-aside>
    <n-container>
      <n-header>Header</n-header>
      <n-main>Main</n-main>
      <n-footer>Footer</n-footer>
    </n-container>
  </n-container>
</template>

<style scoped>
.n-header,
.n-footer {
  background: #6b8bf5;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.n-aside {
  background: rgb(101, 173, 240);
  color: #fff;
  text-align: center;
  line-height: 200px;
}
.n-main {
  background: #3178c6;
  color: #fff;
  text-align: center;
  line-height: 160px;
}
</style>

n-container

参数说明类型可选值默认值
direction子元素的排列方向string['horizontal', 'vertical']——

n-header

参数说明类型可选值默认值
height顶栏高度string——60px

n-aside

参数说明类型可选值默认值
width侧边栏宽度string——200px
参数说明类型可选值默认值
height底栏高度string——60px