# 布局

# 预览

# 使用方法

<template>
  <div>
    <xin-layout>
      <xin-header >header</xin-header>
      <xin-content >content</xin-content>
      <xin-footer >footer</xin-footer>
    </xin-layout>
    <br>
    <xin-layout >
      <xin-header >header</xin-header>
      <xin-layout>
        <xin-side>side</xin-side>
        <xin-content >content</xin-content>
      </xin-layout>
      <xin-footer >footer</xin-footer>
    </xin-layout>
    <br>
    <xin-layout>
      <xin-side>side</xin-side>
      <xin-layout>
        <xin-header>header</xin-header>
        <xin-content>content</xin-content>
        <xin-footer>footer</xin-footer>
      </xin-layout>
    </xin-layout>
    <br>
    <xin-layout>
      <xin-layout>
        <xin-header>header</xin-header>
        <xin-content>content</xin-content>
        <xin-footer>footer</xin-footer>
      </xin-layout>
      <xin-side :should-close="true">side</xin-side>
    </xin-layout>
  </div>
</template>

<style scoped lang="scss">
$background: lightskyblue;
.header{
  height: 50px;
  background: $background;
}
.content{
  height: 150px;
  background: darken($background, 10%);
}
.footer{
  height: 50px;
  background: darken($background, 30%);
}
.side{
  width: 150px;
  background: lighten($background, 15%);
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 选项支持选项

close 设置能显示side是否能关闭，有默认动画。

注意

动画默认设置的side的宽度是150px,若side非默认且使用close，需设置代码中的margin-left。

.slide-enter, .slide-leave-to {
   margin-left: -150px;
 }

1
2
3

← Input - 输入框 Tabs - 标签 →