布局 Layout

页面的基础布局框架，常与组件嵌套使用，构建页面整体布局。

基本用法

典型的页面布局

Header

Main

<template>
  <div class="box">
    <sb-layout class="layout-0">
      <sb-header class="layout-1" height="50"> Header </sb-header>
      <sb-layout direction="horizontal" class="layout-0">
        <sb-aside width="100" >
          <div style="height: 100px" class="layout-3">Aside</div>
        </sb-aside>
        <sb-main class="layout-2"> Main </sb-main>
      </sb-layout>
      <sb-footer class="layout-1" height="50"> Footer </sb-footer>
    </sb-layout>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}
.layout-0 {
  width: 100%;
}
.layout-1 {
  background-color: skyblue;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.layout-2 {
  background-color: rgb(76, 179, 219);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.layout-3 {
  background-color: rgb(160, 224, 247);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
</style>

Layout

布局的基础容器，你可以使用 direction 设置它内容的排版方向

div1

div2

div1

div2

<template>
  <div class="box">
    <sb-layout class="layout-0">
      <div class="layout-1">div1</div>
      <div class="layout-2">div2</div>
    </sb-layout>
    <sb-layout direction="horizontal" class="layout-0">
      <sb-main class="layout-1">div1</sb-main>
      <sb-main class="layout-2">div2</sb-main>
    </sb-layout>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}
.layout-0 {
  width: 100%;
  margin: 10px;
}
.layout-1 {
  background-color: skyblue;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.layout-2 {
  background-color: rgb(76, 179, 219);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
</style>

头部一般是页面最上方的内容，用于放置顶部导航栏等内容，你可以使用height 分配它的高度，或者让它自适应内容高度。

Header

<template>
  <div class="box">
    <sb-header class="layout-1" height="50"> Header </sb-header>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}
.layout-1 {
  background-color: skyblue;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
</style>

头部一般是页面最下方的内容，用于放置导航链接等内容，你可以使用height 分配它的高度，或者让它自适应内容高度。

<template>
  <div class="box">
    <sb-footer class="layout-1" height="50"> Footer </sb-footer>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}
.layout-1 {
  background-color: skyblue;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
</style>

Aside

侧边栏一般是页面左侧/右侧的结构，用于放置侧边栏菜单等内容，你可以使用width 分配它的宽度，或者让它自适应内容宽度。

Main

<template>
  <div class="box">
    <sb-layout direction="horizontal" class="layout-0">
      <sb-aside width="100">
        <div style="height: 100px" class="layout-3">Aside</div>
      </sb-aside>
      <sb-main class="layout-2"> Main </sb-main>
    </sb-layout>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}
.layout-0 {
  width: 100%;
}
.layout-2 {
  background-color: rgb(76, 179, 219);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.layout-3 {
  background-color: rgb(160, 224, 247);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
</style>

Main

页面的主体内容，它自适应宽度和高度。

Main

<template>
  <div class="box">
    <sb-layout direction="horizontal" class="layout-0">
      <sb-main class="layout-2"> Main </sb-main>
    </sb-layout>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}
.layout-0 {
  width: 100%;
}
.layout-2 {
  background-color: rgb(76, 179, 219);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
</style>

API

`<layout>` Props

参数名	描述	类型	默认值
direction	布局的排版方向	'horizontal' \| 'vertical'	vertical

`<layout>` Slots

插槽名	描述	参数
default	放置布局容器的内容	-

`<header>` Props

参数名	描述	类型	默认值
height	头部的高度(px)	Number	-

`<header>` Slots

插槽名	描述	参数
default	放置头部容器的内容	-

`<footer>` Props

参数名	描述	类型	默认值
height	底部的高度(px)	Number	-

`<footer>` Slots

插槽名	描述	参数
default	放置底部容器的内容	-

`<asider>` Props

参数名	描述	类型	默认值
width	侧边栏的宽度(px)	Number	-

`<asider>` Slots

插槽名	描述	参数
default	放置侧边栏容器的内容	-

`<main>` Slots

插槽名	描述	参数
default	放置主体容器的内容	-

布局 Layout #

基本用法 #

Layout #

Header #

Footer #

Aside #

Main #

API #

<layout> Props #

<layout> Slots #

<header> Props #

<header> Slots #

<footer> Props #

<footer> Slots #

<asider> Props #

<asider> Slots #

<main> Slots #

布局 Layout

基本用法

Layout

Header

Footer

Aside

Main

API

`<layout>` Props

`<layout>` Slots

`<header>` Props

`<header>` Slots

`<footer>` Props

`<footer>` Slots

`<asider>` Props

`<asider>` Slots

`<main>` Slots