Weirdo-UI

Appearance

Container布局容器 ​

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

<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

常见页面布局 ​

Header
Main
Footer
<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>
<script setup>
import ElContainer from '@/components/Container/Container.vue'
import ElHeader from '@/components/Container/Header.vue'
import ElMain from '@/components/Container/Main.vue'
import ElFooter from '@/components/Container/Footer.vue'
</script>
Main
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>
<script setup>
import ElContainer from '@/components/Container/Container.vue'
import ElAside from '@/components/Container/Aside.vue'
import ElMain from '@/components/Container/Main.vue'
</script>
Header
Main
<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import ElContainer from '@/components/Container/Container.vue'
import ElHeader from '@/components/Container/Header.vue'
import ElMain from '@/components/Container/Main.vue'
import ElAside from '@/components/Container/Aside.vue'
</script>
Header
Main
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import ElContainer from '@/components/Container/Container.vue'
import ElHeader from '@/components/Container/Header.vue'
import ElMain from '@/components/Container/Main.vue'
import ElAside from '@/components/Container/Aside.vue'
import ElFooter from '@/components/Container/Footer.vue'
</script>