Container 布局

用于布局的容器组件。

基础用法

常见页面布局

Header

Main

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <lb-container>
      <lb-header>Header</lb-header>
      <lb-main>Main</lb-main>
    </lb-container>
  </div>
</template>

<style lang="scss" scoped>
.lb-header,
.lb-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.lb-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.lb-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 200px;
}

body > .lb-container {
  margin-bottom: 40px;
}
</style>

Header

Main

Footer

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <lb-container>
      <lb-header>Header</lb-header>
      <lb-main>Main</lb-main>
      <lb-footer>Footer</lb-footer>
    </lb-container>
  </div>
</template>

<style lang="scss" scoped>
.lb-header,
.lb-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.lb-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.lb-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 200px;
}

body > .lb-container {
  margin-bottom: 40px;
}
</style>

Aside

Main

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <lb-container>
      <lb-aside width="200px">Aside</lb-aside>
      <lb-main>Main</lb-main>
    </lb-container>
  </div>
</template>

<style lang="scss" scoped>
.lb-header,
.lb-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.lb-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.lb-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 200px;
}

body > .lb-container {
  margin-bottom: 40px;
}
</style>

Aside

Main

Aside

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <lb-container>
      <lb-aside width="200px">Aside</lb-aside>
      <lb-main>Main</lb-main>
      <lb-aside width="200px">Aside</lb-aside>
    </lb-container>
  </div>
</template>

<style lang="scss" scoped>
.lb-header,
.lb-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.lb-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.lb-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 200px;
}

body > .lb-container {
  margin-bottom: 40px;
}
</style>

Aside

Header

Main

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <lb-container>
      <lb-aside width="200px">Aside</lb-aside>
      <lb-container>
        <lb-header>Header</lb-header>
        <lb-main>Main</lb-main>
      </lb-container>
    </lb-container>
  </div>
</template>

<style lang="scss" scoped>
.lb-header,
.lb-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.lb-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.lb-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 200px;
}

body > .lb-container {
  margin-bottom: 40px;
}
</style>

Header

Aside

Main

Footer

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <lb-container>
      <lb-header>Header</lb-header>
      <lb-container>
        <lb-aside width="200px">Aside</lb-aside>
        <lb-main>Main</lb-main>
      </lb-container>
      <lb-footer>Footer</lb-footer>
    </lb-container>
  </div>
</template>

<style lang="scss" scoped>
.lb-header,
.lb-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.lb-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.lb-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 200px;
}

body > .lb-container {
  margin-bottom: 40px;
}
</style>

Container 属性

Attribute	Description	Type	Accepted Values	Default
direction	子元素的排列方向	string	horizontal / vertical	当子元素中包含 LbHeader 或 LbFooter 时为 vertical，否则为 horizontal

Header 属性

Attribute	Description	Type	Accepted Values	Default
height	顶栏高度	string	—	60px

Aside 属性

Attribute	Description	Type	Accepted Values	Default
width	侧边栏宽度	string	—	300px

Footer 属性

Attribute	Description	Type	Accepted Values	Default
height	底栏高度	string	—	60px