橘子UI

# Layout-布局

# 注意

使用该组件时，需要引入 Layout 、 Header 、 Content 、 Footer 、 Sider 五个组件并进行注册。使用时其余四个组件必须在 Layout 组件的包裹之下。

# 预览

# 使用方法

<template>
  <div class="wrapper">
    <o-layout>
      <o-header> header </o-header>
      <o-content> content </o-content>
      <o-footer> footer </o-footer>
    </o-layout>
    <br>
    <o-layout>
      <o-header> header </o-header>
      <o-layout>
        <o-sider> sider </o-sider>
        <o-content> content </o-content>
      </o-layout>
      <o-footer> footer </o-footer>
    </o-layout>
    <br>
    <o-layout>
      <o-header>header</o-header>
      <o-layout>
        <o-sider> sider </o-sider>
        <o-layout>
          <o-content> content </o-content>
          <o-footer> footer </o-footer>
        </o-layout>
      </o-layout>
    </o-layout>
  </div>
</template>

<style lang="scss" scoped>
* {box-sizing: border-box;}
$background: #3eaf7c;
$wrapper-top: 10px;
$font-color: white;

.wrapper {
  > .layout {height: 30vh;
    > .header {height: 3em;background: $background;}
    > .content {background: lighten($background, 40%);}
    > .layout {height: 6em;
      > .sider {width: 3em;background: lighten($background, 15%);}
      > .content {background: lighten($background, 40%);}
      > .layout {
        > .content {background: lighten($background, 40%);}
        > .footer {background: $background;}}}
    > .footer {background: $background;}}}
</style>

# 选项

提供基础布局，样式自定义。

# 组件概述

  • i-layout ：布局容器，其下可嵌套 header content sider footer 或 layout 本身，可以放在任何父容器中。注意: 当你在 layout 组件中放入了 sider 组件时， layout 的布局会由上下布局转变为左右布局。

  • i-header ：顶部布局，其下可嵌套任何元素，只能放在 layout 中。

  • i-sider ：侧边栏，其下可嵌套任何元素，只能放在 layout 中。

  • i-content ：内容部分，其下可嵌套任何元素，只能放在 layout 中。

  • i-footer ：底部布局，其下可嵌套任何元素，只能放在 layout 中。

← Tabs-标签 →