<template>
  <div>
    <section class="demo-section">
      <h4>基本用法</h4>
      <div style="height:300px">
        <xLayout>
          <xSider width="170">dd</xSider>
          <xContent>
            <xLayout>
              <xHeader>
                ddd
              </xHeader>
              <xContent scrollbar>
                <div v-for="item in 100" :key="item">dd{{item}}</div>
              </xContent>
              <xFooter>
                ff
              </xFooter>
            </xLayout>
          </xContent>
        </xLayout>
      </div>
    </section>
    <section class="demo-section">
      <h4>其他用法</h4>
      <div style="height:300px">
        <xLayout>
          <xHeader :height="20">ddd</xHeader>
          <xContent>
            <xLayout>
              <xSider width="170">dd</xSider>
              <xContent>dssd</xContent>
            </xLayout>
          </xContent>
        </xLayout>
      </div>
    </section>
  </div>
</template>

<script>
import { xLayout, xHeader, xFooter, xSider, xContent } from '../src'

export default {
  name: 'app',
  components: { xLayout, xHeader, xFooter, xSider, xContent },
  data () {
    return {
      
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss">
body,html {
  height: 100%;
}
body {
  margin: 0
}
</style>
