Container 布局容器
用于搭建页面基础结构的容器组件：
<u-container>：外层容器。当子节点包含 <u-header> 或 <u-footer> 时，全部子元素会垂直排布；否则为水平排布。
<u-header>：顶栏区域。
<u-aside>：侧边栏，常用于放置导航。
<u-main>：主体内容区域。
<u-footer>：底栏区域。
TIP
以上组件基于 Flex 布局，请确认目标浏览器支持。<u-container> 的直接子节点只能是后四种之一；后四种的父级必须是 <u-container>。
常见页面布局
vue
<template>
<div class="common-layout">
<u-container>
<u-header>Header</u-header>
<u-main>Main</u-main>
</u-container>
</div>
</template>隐藏源代码
vue
<template>
<div class="common-layout">
<u-container>
<u-header>Header</u-header>
<u-main>Main</u-main>
<u-footer>Footer</u-footer>
</u-container>
</div>
</template>隐藏源代码
vue
<template>
<div class="common-layout">
<u-container>
<u-aside width="200px">Aside</u-aside>
<u-main>Main</u-main>
<u-aside width="200px">Aside</u-aside>
</u-container>
</div>
</template>隐藏源代码
vue
<template>
<div class="common-layout">
<u-container>
<u-header>Header</u-header>
<u-container>
<u-aside width="200px">Aside</u-aside>
<u-main>Main</u-main>
</u-container>
</u-container>
</div>
</template>隐藏源代码
vue
<template>
<div class="common-layout">
<u-container>
<u-header>Header</u-header>
<u-container>
<u-aside width="200px">Aside</u-aside>
<u-container>
<u-main>Main</u-main>
<u-footer>Footer</u-footer>
</u-container>
</u-container>
</u-container>
</div>
</template>隐藏源代码
vue
<template>
<div class="common-layout">
<u-container>
<u-aside width="200px">Aside</u-aside>
<u-container>
<u-header>Header</u-header>
<u-main>Main</u-main>
</u-container>
</u-container>
</div>
</template>隐藏源代码
vue
<template>
<div class="common-layout">
<u-container>
<u-aside width="200px">Aside</u-aside>
<u-container>
<u-header>Header</u-header>
<u-main>Main</u-main>
<u-footer>Footer</u-footer>
</u-container>
</u-container>
</div>
</template>隐藏源代码
示例
Tom
vue
<template>
<u-container class="layout-container-demo" style="height: 500px">
<u-aside width="200px">
<u-scrollbar>
<u-menu :default-openeds="['1', '3']">
<u-sub-menu index="1">
<template #title>
<u-icon><message /></u-icon>Navigator One
</template>
<u-menu-item-group>
<template #title>Group 1</template>
<u-menu-item index="1-1">Option 1</u-menu-item>
<u-menu-item index="1-2">Option 2</u-menu-item>
</u-menu-item-group>
<u-menu-item-group title="Group 2">
<u-menu-item index="1-3">Option 3</u-menu-item>
</u-menu-item-group>
<u-sub-menu index="1-4">
<template #title>Option4</template>
<u-menu-item index="1-4-1">Option 4-1</u-menu-item>
</u-sub-menu>
</u-sub-menu>
<u-sub-menu index="2">
<template #title>
<u-icon><icon-menu /></u-icon>Navigator Two
</template>
<u-menu-item-group>
<template #title>Group 1</template>
<u-menu-item index="2-1">Option 1</u-menu-item>
<u-menu-item index="2-2">Option 2</u-menu-item>
</u-menu-item-group>
<u-menu-item-group title="Group 2">
<u-menu-item index="2-3">Option 3</u-menu-item>
</u-menu-item-group>
<u-sub-menu index="2-4">
<template #title>Option 4</template>
<u-menu-item index="2-4-1">Option 4-1</u-menu-item>
</u-sub-menu>
</u-sub-menu>
<u-sub-menu index="3">
<template #title>
<u-icon><setting /></u-icon>Navigator Three
</template>
<u-menu-item-group>
<template #title>Group 1</template>
<u-menu-item index="3-1">Option 1</u-menu-item>
<u-menu-item index="3-2">Option 2</u-menu-item>
</u-menu-item-group>
<u-menu-item-group title="Group 2">
<u-menu-item index="3-3">Option 3</u-menu-item>
</u-menu-item-group>
<u-sub-menu index="3-4">
<template #title>Option 4</template>
<u-menu-item index="3-4-1">Option 4-1</u-menu-item>
</u-sub-menu>
</u-sub-menu>
</u-menu>
</u-scrollbar>
</u-aside>
<u-container>
<u-header style="text-align: right; font-size: 12px">
<div class="toolbar">
<u-dropdown>
<u-icon style="margin-right: 8px; margin-top: 1px">
<setting />
</u-icon>
<template #dropdown>
<u-dropdown-menu>
<u-dropdown-item>View</u-dropdown-item>
<u-dropdown-item>Add</u-dropdown-item>
<u-dropdown-item>Delete</u-dropdown-item>
</u-dropdown-menu>
</template>
</u-dropdown>
<span>Tom</span>
</div>
</u-header>
<u-main>
<u-scrollbar>
<u-table :data="tableData">
<u-table-column prop="date" label="Date" width="140" />
<u-table-column prop="name" label="Name" width="120" />
<u-table-column prop="address" label="Address" />
</u-table>
</u-scrollbar>
</u-main>
</u-container>
</u-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@uniboot/icons-vue'
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>
<style scoped>
.layout-container-demo .u-header {
position: relative;
background-color: var(--u-color-primary-light-7);
color: var(--u-text-color-primary);
}
.layout-container-demo .u-aside {
color: var(--u-text-color-primary);
background: var(--u-color-primary-light-8);
}
.layout-container-demo .u-menu {
border-right: none;
}
.layout-container-demo .u-main {
padding: 0;
}
.layout-container-demo .toolbar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
right: 20px;
}
</style>隐藏源代码
布局容器 API
布局容器 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 子元素的排列方向 | enum | 与 <u-header> 或 <u-footer> 嵌套时为 vertical，否则为 horizontal |
布局容器 插槽
| 名称 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Container / Header / Aside / Main / Footer |
顶栏 API
顶栏 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 顶栏高度 | string | 60px |
顶栏 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |
侧边栏 API
侧边栏 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 侧边栏宽度 | string | 300px |
侧边栏 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |
主体 API
主体 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |
页脚 API
页脚 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 底栏高度 | string | 60px |
页脚 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |