<template>
  <el-tabs v-model="curTab">
    <el-tab-pane label="侧边栏弹窗效果" name="demo">
      <keep-alive>
        <sidebar-dialog-code />
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="演示代码" name="code">
      <pre v-highlightjs="code">
        <code class="language-html">
        </code>
      </pre>
    </el-tab-pane>
    <el-tab-pane label="API" name="api">
      <MdView url="md/sidebardialog.md" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import SidebarDialogCode from '@/demo/SidebarDialogCode.vue'
import MdView from '@/views/MdView.vue'
import sidebardialogCode from '@/demo/html/sidebardialog.code.js'

export default {
  name: 'my-sidebardialog',
  components: { SidebarDialogCode, MdView },
  data() {
    return {
      curTab: 'demo',
      code: `${sidebardialogCode.code}`
    }
  },
  methods: {}
}
</script>
<style scoped>
.el-tabs--top {
  height: 100%;
}

.el-tabs--top >>> .el-tabs__content {
  height: calc(100% - 50px);
}

.el-tab-pane {
  height: calc(100% - 10px);
  overflow-y: auto;
}
</style>
