<template>
  <Container>
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">MtContainer 容器</WlHeader>
    </template>
    <template v-slot:main>
      <MtContainer :isCollapse="isCollapse" :footerVisible="footerVisible">
        <template v-slot:header>
          <div class="block" style="background: lightgray">头部</div>
        </template>
        <template v-slot:aside>
          <div style="background: gray;height: 100%">侧边</div>
        </template>
        <template v-slot:content>
          <WlButton @onClick="isCollapse = !isCollapse">
            {{ isCollapse ? "收起" : "展开" }}侧边
          </WlButton>
          <WlButton @onClick="footerVisible = !footerVisible">
            {{ footerVisible ? "收起" : "展开" }}页脚
          </WlButton>
        </template>
        <template v-slot:footer>
          <div v-if="footerVisible" class="block" style="background: lightgray;">页脚</div>
        </template>
      </MtContainer>
    </template>
  </Container>
</template>

<script>
import Container from "../components/Container";
export default {
  name: "MtContainer-Example",
  components: { Container },
  data() {
    return {
      isCollapse: true,
      footerVisible: true,
    };
  },
};
</script>
