Layout布局容器

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

✨简单用法

头部 内容区 底部

上中下布局，外容器wb-layout包裹顶栏容器wb-header、内容区容器wb-content、底栏容器wb-footer

<template>
    <div>
        <wb-layout>
            <wb-header>头部</wb-header>
            <wb-content>内容区</wb-content>
            <wb-footer>底部</wb-footer>
        </wb-layout>
    </div>
</template>
<style>
    .wbHeader, .wbFooter {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .contentLayout {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
</style>

显示代码 复制代码 复制代码

✨简单用法

头部 左侧边栏 右内容区 底部

上左中下布局，外容器wb-layout包裹顶栏容器wb-header、底栏容器wb-footer 并嵌套包裹外容器

<template>
    <div>
        <wb-layout >
            <wb-header>头部</wb-header>
            <wb-layout>
                <wb-aside>左侧边栏</wb-aside>
                <wb-content>右内容区</wb-content>
            </wb-layout>
            <wb-footer>底部</wb-footer>
        </wb-layout>
    </div>
</template>
<style>
    .wbHeader, .wbFooter {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
            padding: 10px;
        }
        .contentLayout {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
</style>

显示代码 复制代码 复制代码

✨简单用法

左侧边栏 头部 右内容区 底部

左上中下布局，外容器wb-layout包裹侧边栏容器wb-aside并嵌套包裹外容器

<template>
    <div>
        <wb-layout>
            <wb-aside>左侧边栏</wb-aside>
            <wb-layout>
                <wb-header>头部</wb-header>
                <wb-content>右内容区</wb-content>
                <wb-footer>底部</wb-footer>
            </wb-layout>
        </wb-layout>
    </div>
</template>
<style>
    .wbHeader, .wbFooter {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
            padding: 10px;
        }
        .contentLayout {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
</style>

显示代码 复制代码 复制代码