Container 布局容器

用于布局的容器组件。

基础用法

Header

Aside

Main

Footer

<template>
  <x-container>
    <x-header>Header</x-header>
    <x-container>
      <x-aside>Aside</x-aside>
      <x-main>Main</x-main>
    </x-container>
    <x-footer>Footer</x-footer>
  </x-container>
</template>

<script setup>
import { Container, Header, Aside, Main, Footer } from '@xto/layout'
</script>

常见页面布局

Aside

Header

Main

API

Container Props

属性	说明	类型	默认值
direction	子元素的排列方向	'horizontal' | 'vertical'	'vertical'

Header Props

属性	说明	类型	默认值
height	顶栏高度	string | number	60

Aside Props

属性	说明	类型	默认值
width	侧边栏宽度	string | number	200

Main Props

无特定属性

Footer Props

属性	说明	类型	默认值
height	底栏高度	string | number	60