Layout

Handling the overall layout of a page.

Basic Usage

Basic usage of Layout.

<template>
  <div class="layout-demo">
    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout-content></tu-layout-content>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>

    <br />

    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout>
        <tu-layout-sider></tu-layout-sider>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>

    <br />

    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout>
        <tu-layout-content></tu-layout-content>
        <tu-layout-sider></tu-layout-sider>
      </tu-layout>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>

    <br />

    <tu-layout style="height: 300px">
      <tu-layout-sider :width="120"></tu-layout-sider>
      <tu-layout>
        <tu-layout-header></tu-layout-header>
        <tu-layout-content></tu-layout-content>
        <tu-layout-footer></tu-layout-footer>
      </tu-layout>
    </tu-layout>
  </div>
</template>

<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}

.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
  height: 54px;
  background-color: rgba(128, 128, 128, 0.2);
}

.layout-demo :deep(.tu-layout__sider) {
  background-color: rgba(128, 128, 128, 0.1);
}

.layout-demo :deep(.tu-layout__content) {
  background-color: rgba(128, 128, 128, 0.16);
}
</style>

<template>
  <div class="layout-demo">
    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout-content></tu-layout-content>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>

    <br />

    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout>
        <tu-layout-sider></tu-layout-sider>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>

    <br />

    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout>
        <tu-layout-content></tu-layout-content>
        <tu-layout-sider></tu-layout-sider>
      </tu-layout>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>

    <br />

    <tu-layout style="height: 300px">
      <tu-layout-sider :width="120"></tu-layout-sider>
      <tu-layout>
        <tu-layout-header></tu-layout-header>
        <tu-layout-content></tu-layout-content>
        <tu-layout-footer></tu-layout-footer>
      </tu-layout>
    </tu-layout>
  </div>
</template>

<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}

.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
  height: 54px;
  background-color: rgba(128, 128, 128, 0.2);
}

.layout-demo :deep(.tu-layout__sider) {
  background-color: rgba(128, 128, 128, 0.1);
}

.layout-demo :deep(.tu-layout__content) {
  background-color: rgba(128, 128, 128, 0.16);
}
</style>

Customize Button

Setting the trigger property of Menu.Sider, the icon of the collapse button can be customized.

<template>
  <tu-layout class="layout-demo">
    <tu-layout-sider collapsible breakpoint="xl" :width="160">
      <tu-menu
        style="width: 160px"
        effect="default"
        :default-selected-keys="['1']"
      >
        <tu-menu-item key="1">
          <template #icon>
            <tu-icon>
              <Menu />
            </tu-icon>
          </template>
          Navigation 1
        </tu-menu-item>
        <tu-menu-item key="2">
          <template #icon>
            <tu-icon>
              <Tools />
            </tu-icon>
          </template>
          Navigation 2
        </tu-menu-item>
        <tu-sub-menu key="3" title="Navigation 3">
          <template #icon>
            <tu-icon>
              <UploadFilled />
            </tu-icon>
          </template>
          <tu-menu-item key="3-1">Menu 1</tu-menu-item>
          <tu-menu-item key="3-2">Menu 2</tu-menu-item>
        </tu-sub-menu>
        <tu-menu-item key="4">
          <template #icon>
            <tu-icon>
              <Promotion />
            </tu-icon>
          </template>
          Navigation 4
        </tu-menu-item>
      </tu-menu>
      <template #trigger="{ collapsed }">
        <tu-icon v-if="collapsed"><CaretRight /></tu-icon>
        <tu-icon v-else><CaretLeft /></tu-icon>
      </template>
    </tu-layout-sider>
    <tu-layout>
      <tu-layout-header style="padding-left: 20px"></tu-layout-header>
      <tu-layout style="padding: 0 12px">
        <tu-breadcrumb :style="{ margin: '16px 0' }">
          <tu-breadcrumb-item>Home</tu-breadcrumb-item>
          <tu-breadcrumb-item>Channel</tu-breadcrumb-item>
          <tu-breadcrumb-item>News</tu-breadcrumb-item>
        </tu-breadcrumb>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
    </tu-layout>
  </tu-layout>
</template>

<script lang="ts" setup>
import {
  CaretLeft,
  CaretRight,
  Menu,
  Tools,
  UploadFilled,
  Promotion
} from '@tu-view-plus/icons-vue';
</script>

<style scoped lang="scss">
.layout-demo {
  height: 400px;
  color: #71757f;
  font-size: 14px;
  box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
    -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
  border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
  height: 54px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>

<template>
  <tu-layout class="layout-demo">
    <tu-layout-sider collapsible breakpoint="xl" :width="160">
      <tu-menu
        style="width: 160px"
        effect="default"
        :default-selected-keys="['1']"
      >
        <tu-menu-item key="1">
          <template #icon>
            <tu-icon>
              <Menu />
            </tu-icon>
          </template>
          Navigation 1
        </tu-menu-item>
        <tu-menu-item key="2">
          <template #icon>
            <tu-icon>
              <Tools />
            </tu-icon>
          </template>
          Navigation 2
        </tu-menu-item>
        <tu-sub-menu key="3" title="Navigation 3">
          <template #icon>
            <tu-icon>
              <UploadFilled />
            </tu-icon>
          </template>
          <tu-menu-item key="3-1">Menu 1</tu-menu-item>
          <tu-menu-item key="3-2">Menu 2</tu-menu-item>
        </tu-sub-menu>
        <tu-menu-item key="4">
          <template #icon>
            <tu-icon>
              <Promotion />
            </tu-icon>
          </template>
          Navigation 4
        </tu-menu-item>
      </tu-menu>
      <template #trigger="{ collapsed }">
        <tu-icon v-if="collapsed"><CaretRight /></tu-icon>
        <tu-icon v-else><CaretLeft /></tu-icon>
      </template>
    </tu-layout-sider>
    <tu-layout>
      <tu-layout-header style="padding-left: 20px"></tu-layout-header>
      <tu-layout style="padding: 0 12px">
        <tu-breadcrumb :style="{ margin: '16px 0' }">
          <tu-breadcrumb-item>Home</tu-breadcrumb-item>
          <tu-breadcrumb-item>Channel</tu-breadcrumb-item>
          <tu-breadcrumb-item>News</tu-breadcrumb-item>
        </tu-breadcrumb>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
    </tu-layout>
  </tu-layout>
</template>

<script lang="ts" setup>
import {
  CaretLeft,
  CaretRight,
  Menu,
  Tools,
  UploadFilled,
  Promotion
} from '@tu-view-plus/icons-vue';
</script>

<style scoped lang="scss">
.layout-demo {
  height: 400px;
  color: #71757f;
  font-size: 14px;
  box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
    -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
  border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
  height: 54px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>

Customize Collapse Button

Setting the trigger property of Menu.Sider to null, the built-in trigger of Sider will not be displayed. At this time, you can customize the collapse button.

<template>
  <tu-layout class="layout-demo">
    <tu-layout-sider
      hide-trigger
      collapsible
      breakpoint="xl"
      :width="160"
      :collapsed="collapsed"
    >
      <tu-menu
        style="width: 160px"
        effect="default"
        :default-selected-keys="['1']"
      >
        <tu-menu-item key="1">
          <template #icon>
            <tu-icon>
              <Menu />
            </tu-icon>
          </template>
          Navigation 1
        </tu-menu-item>
        <tu-menu-item key="2">
          <template #icon>
            <tu-icon>
              <Tools />
            </tu-icon>
          </template>
          Navigation 2
        </tu-menu-item>
        <tu-sub-menu key="3" title="Navigation 3">
          <template #icon>
            <tu-icon>
              <UploadFilled />
            </tu-icon>
          </template>
          <tu-menu-item key="3-1">Menu 1</tu-menu-item>
          <tu-menu-item key="3-2">Menu 2</tu-menu-item>
        </tu-sub-menu>
        <tu-menu-item key="4">
          <template #icon>
            <tu-icon>
              <Promotion />
            </tu-icon>
          </template>
          Navigation 4
        </tu-menu-item>
      </tu-menu>
    </tu-layout-sider>
    <tu-layout>
      <tu-layout-header style="padding-left: 20px">
        <tu-button size="small" @click="collapsed = !collapsed">
          <tu-icon v-if="collapsed"><CaretRight /></tu-icon>
          <tu-icon v-else><CaretLeft /></tu-icon>
        </tu-button>
      </tu-layout-header>
      <tu-layout style="padding: 0 12px">
        <tu-breadcrumb :style="{ margin: '16px 0' }">
          <tu-breadcrumb-item>Home</tu-breadcrumb-item>
          <tu-breadcrumb-item>Channel</tu-breadcrumb-item>
          <tu-breadcrumb-item>News</tu-breadcrumb-item>
        </tu-breadcrumb>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
    </tu-layout>
  </tu-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  CaretLeft,
  CaretRight,
  Menu,
  Tools,
  UploadFilled,
  Promotion
} from '@tu-view-plus/icons-vue';

const collapsed = ref(false);
</script>

<style scoped lang="scss">
.layout-demo {
  height: 400px;
  color: #71757f;
  font-size: 14px;
  box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
    -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
  border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>

<template>
  <tu-layout class="layout-demo">
    <tu-layout-sider
      hide-trigger
      collapsible
      breakpoint="xl"
      :width="160"
      :collapsed="collapsed"
    >
      <tu-menu
        style="width: 160px"
        effect="default"
        :default-selected-keys="['1']"
      >
        <tu-menu-item key="1">
          <template #icon>
            <tu-icon>
              <Menu />
            </tu-icon>
          </template>
          Navigation 1
        </tu-menu-item>
        <tu-menu-item key="2">
          <template #icon>
            <tu-icon>
              <Tools />
            </tu-icon>
          </template>
          Navigation 2
        </tu-menu-item>
        <tu-sub-menu key="3" title="Navigation 3">
          <template #icon>
            <tu-icon>
              <UploadFilled />
            </tu-icon>
          </template>
          <tu-menu-item key="3-1">Menu 1</tu-menu-item>
          <tu-menu-item key="3-2">Menu 2</tu-menu-item>
        </tu-sub-menu>
        <tu-menu-item key="4">
          <template #icon>
            <tu-icon>
              <Promotion />
            </tu-icon>
          </template>
          Navigation 4
        </tu-menu-item>
      </tu-menu>
    </tu-layout-sider>
    <tu-layout>
      <tu-layout-header style="padding-left: 20px">
        <tu-button size="small" @click="collapsed = !collapsed">
          <tu-icon v-if="collapsed"><CaretRight /></tu-icon>
          <tu-icon v-else><CaretLeft /></tu-icon>
        </tu-button>
      </tu-layout-header>
      <tu-layout style="padding: 0 12px">
        <tu-breadcrumb :style="{ margin: '16px 0' }">
          <tu-breadcrumb-item>Home</tu-breadcrumb-item>
          <tu-breadcrumb-item>Channel</tu-breadcrumb-item>
          <tu-breadcrumb-item>News</tu-breadcrumb-item>
        </tu-breadcrumb>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
    </tu-layout>
  </tu-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  CaretLeft,
  CaretRight,
  Menu,
  Tools,
  UploadFilled,
  Promotion
} from '@tu-view-plus/icons-vue';

const collapsed = ref(false);
</script>

<style scoped lang="scss">
.layout-demo {
  height: 400px;
  color: #71757f;
  font-size: 14px;
  box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
    -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
  border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>

Responsive Sider

The Slider on the left can be set to expand/collapse in conjunction with Menu, and set breakpoint for responsive contraction.

<template>
  <tu-layout class="layout-demo">
    <tu-layout-sider collapsible breakpoint="xl" :width="160">
      <tu-menu
        style="width: 160px"
        effect="default"
        :default-selected-keys="['1']"
      >
        <tu-menu-item key="1">
          <template #icon>
            <tu-icon>
              <Menu />
            </tu-icon>
          </template>
          Navigation 1
        </tu-menu-item>
        <tu-menu-item key="2">
          <template #icon>
            <tu-icon>
              <Tools />
            </tu-icon>
          </template>
          Navigation 2
        </tu-menu-item>
        <tu-sub-menu key="3" title="Navigation 3">
          <template #icon>
            <tu-icon>
              <UploadFilled />
            </tu-icon>
          </template>
          <tu-menu-item key="3-1">Menu 1</tu-menu-item>
          <tu-menu-item key="3-2">Menu 2</tu-menu-item>
        </tu-sub-menu>
        <tu-menu-item key="4">
          <template #icon>
            <tu-icon>
              <Promotion />
            </tu-icon>
          </template>
          Navigation 4
        </tu-menu-item>
      </tu-menu>
      <template #trigger="{ collapsed }">
        <tu-icon v-if="collapsed"><CaretRight /></tu-icon>
        <tu-icon v-else><CaretLeft /></tu-icon>
      </template>
    </tu-layout-sider>
    <tu-layout>
      <tu-layout-header>
        <tu-menu
          mode="horizontal"
          effect="default"
          :default-selected-keys="['1']"
        >
          <tu-menu-item key="1">Navigation 1</tu-menu-item>
          <tu-menu-item key="2">Navigation 2</tu-menu-item>
          <tu-sub-menu key="3" title="Navigation 3">
            <tu-menu-item key="3-1">Menu 1</tu-menu-item>
            <tu-menu-item key="3-2">Menu 2</tu-menu-item>
          </tu-sub-menu>
          <tu-menu-item key="4">Navigation 4</tu-menu-item>
        </tu-menu>
      </tu-layout-header>
      <tu-layout style="padding: 0 12px">
        <tu-breadcrumb :style="{ margin: '16px 0' }">
          <tu-breadcrumb-item>Home</tu-breadcrumb-item>
          <tu-breadcrumb-item>Channel</tu-breadcrumb-item>
          <tu-breadcrumb-item>News</tu-breadcrumb-item>
        </tu-breadcrumb>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
    </tu-layout>
  </tu-layout>
</template>

<script lang="ts" setup>
import {
  CaretLeft,
  CaretRight,
  Menu,
  Tools,
  UploadFilled,
  Promotion
} from '@tu-view-plus/icons-vue';
</script>

<style scoped lang="scss">
.layout-demo {
  height: 400px;
  color: #71757f;
  font-size: 14px;
  box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
    -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
  border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>

<template>
  <tu-layout class="layout-demo">
    <tu-layout-sider collapsible breakpoint="xl" :width="160">
      <tu-menu
        style="width: 160px"
        effect="default"
        :default-selected-keys="['1']"
      >
        <tu-menu-item key="1">
          <template #icon>
            <tu-icon>
              <Menu />
            </tu-icon>
          </template>
          Navigation 1
        </tu-menu-item>
        <tu-menu-item key="2">
          <template #icon>
            <tu-icon>
              <Tools />
            </tu-icon>
          </template>
          Navigation 2
        </tu-menu-item>
        <tu-sub-menu key="3" title="Navigation 3">
          <template #icon>
            <tu-icon>
              <UploadFilled />
            </tu-icon>
          </template>
          <tu-menu-item key="3-1">Menu 1</tu-menu-item>
          <tu-menu-item key="3-2">Menu 2</tu-menu-item>
        </tu-sub-menu>
        <tu-menu-item key="4">
          <template #icon>
            <tu-icon>
              <Promotion />
            </tu-icon>
          </template>
          Navigation 4
        </tu-menu-item>
      </tu-menu>
      <template #trigger="{ collapsed }">
        <tu-icon v-if="collapsed"><CaretRight /></tu-icon>
        <tu-icon v-else><CaretLeft /></tu-icon>
      </template>
    </tu-layout-sider>
    <tu-layout>
      <tu-layout-header>
        <tu-menu
          mode="horizontal"
          effect="default"
          :default-selected-keys="['1']"
        >
          <tu-menu-item key="1">Navigation 1</tu-menu-item>
          <tu-menu-item key="2">Navigation 2</tu-menu-item>
          <tu-sub-menu key="3" title="Navigation 3">
            <tu-menu-item key="3-1">Menu 1</tu-menu-item>
            <tu-menu-item key="3-2">Menu 2</tu-menu-item>
          </tu-sub-menu>
          <tu-menu-item key="4">Navigation 4</tu-menu-item>
        </tu-menu>
      </tu-layout-header>
      <tu-layout style="padding: 0 12px">
        <tu-breadcrumb :style="{ margin: '16px 0' }">
          <tu-breadcrumb-item>Home</tu-breadcrumb-item>
          <tu-breadcrumb-item>Channel</tu-breadcrumb-item>
          <tu-breadcrumb-item>News</tu-breadcrumb-item>
        </tu-breadcrumb>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
    </tu-layout>
  </tu-layout>
</template>

<script lang="ts" setup>
import {
  CaretLeft,
  CaretRight,
  Menu,
  Tools,
  UploadFilled,
  Promotion
} from '@tu-view-plus/icons-vue';
</script>

<style scoped lang="scss">
.layout-demo {
  height: 400px;
  color: #71757f;
  font-size: 14px;
  box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
    -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
  border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>

Resize Sider

By resizeDirections, using the mouse to drag the sidebar to zoom in and out.

<template>
  <div class="layout-demo">
    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout>
        <tu-layout-sider :resize-directions="['right']"></tu-layout-sider>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>
  </div>
</template>

<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}

.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
  height: 54px;
  background-color: rgba(128, 128, 128, 0.2);
}

.layout-demo :deep(.tu-layout__sider) {
  background-color: rgba(128, 128, 128, 0.1);
}

.layout-demo :deep(.tu-layout__content) {
  background-color: rgba(128, 128, 128, 0.16);
}
</style>

<template>
  <div class="layout-demo">
    <tu-layout style="height: 300px">
      <tu-layout-header></tu-layout-header>
      <tu-layout>
        <tu-layout-sider :resize-directions="['right']"></tu-layout-sider>
        <tu-layout-content></tu-layout-content>
      </tu-layout>
      <tu-layout-footer></tu-layout-footer>
    </tu-layout>
  </div>
</template>

<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-stretch: condensed;
  text-align: center;
  font-size: 14px;
  color: #71757f;
}

.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
  height: 54px;
  background-color: rgba(128, 128, 128, 0.2);
}

.layout-demo :deep(.tu-layout__sider) {
  background-color: rgba(128, 128, 128, 0.1);
}

.layout-demo :deep(.tu-layout__content) {
  background-color: rgba(128, 128, 128, 0.16);
}
</style>

Layout API

Layout Attributes

Name	Description	Type	Default
has-sider	Indicates that there is a Sider in the sub-element, which generally does not need to be specified. Used to avoid style flicker when rendering on the server side.	`Boolean`	false

Name	Description
default	Content

Layout-Content Slots

Name	Description
default	Content

Name	Description
default	Content

Layout-Sider Attributes

Name	Description	Type	Default
theme	Theme	`String`	light
collapsed	Current collapsed state	`Boolean`	-
default-collapsed	The default collapsed state	`Boolean`	false
collapsible	Whether is collapsible	`Boolean`	false
width	Width	`Boolean`	200
collapsed-width	Collapsed width	`Boolean`	48
reverse-arrow	Flip and fold the direction of the hint arrow, which can be used when Sider is on the right	`Boolean`	false
breakpoint	Trigger breakpoints for responsive layout.	`String`	-
resize-directions	Can replace the native `aside` tag with ResizeBox. This is the directions parameter of ResizeBox.	`Array`	-
hide-trigger	Whether to hide the bottom fold trigger	`Boolean`	false

Layout-Sider Events

Name	Description	Type
collapse	Events on expand/collapse. There are two ways to trigger click trigger and responsive feedback	`Function`
breakpoint	Events when a responsive layout breakpoint is triggered	`Function`

Layout-Sider Slots

Name	Description
trigger	Custom bottom folding trigger.

Layout

Basic Usage

Customize Button

Customize Collapse Button

Responsive Sider

Resize Sider

Layout API

Layout Attributes

Layout-Header Slots

Layout-Content Slots

Layout-Footer Slots

Layout-Sider Attributes

Layout-Sider Events

Layout-Sider Slots

Layout ​

Basic Usage ​

Customize Button ​

Customize Collapse Button ​

Responsive Sider ​

Resize Sider ​

Layout API ​

Layout Attributes ​

Layout-Header Slots ​

Layout-Content Slots ​

Layout-Footer Slots ​

Layout-Sider Attributes ​

Layout-Sider Events ​

Layout-Sider Slots ​

Layout

Basic Usage

Customize Button

Customize Collapse Button

Responsive Sider

Resize Sider

Layout API

Layout Attributes

Layout-Header Slots

Layout-Content Slots

Layout-Footer Slots

Layout-Sider Attributes

Layout-Sider Events

Layout-Sider Slots