tn-element-ui
Version:
element-ui二次封装
68 lines (64 loc) • 2.24 kB
HTML
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Layout Example</title>
<script
type="text/javascript"
src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
></script>
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
/>
<!-- 引入组件库 -->
<script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
<script type="text/javascript" src="../dist/tn-element-ui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="./examples.css" /> -->
<style></style>
</head>
<body class="tn-background-normal">
<script type="x-template" id="tn-body">
<tn-h-box content-spacing>
<tn-flex-item size="20%" class="tn-background-grey" cellspacing>
</tn-flex-item>
<tn-splitter></tn-splitter>
<tn-v-box size="auto" bordered>
<tn-flex-item size="300px" style="max-height: 400px;" class="tn-background-grey">
</tn-flex-item>
<tn-splitter></tn-splitter>
<tn-flex-item size="auto" class="tn-background-grey">
</tn-flex-item>
</tn-v-box>
<tn-splitter :dragable="false"></tn-splitter>
<tn-v-box size="20%" cellspacing>
<tn-flex-item size="1" class="tn-background-grey">
</tn-flex-item>
<tn-splitter></tn-splitter>
<tn-flex-item size="1" class="tn-background-grey">
</tn-flex-item>
<tn-splitter></tn-splitter>
<tn-flex-item size="1" class="tn-background-grey">
</tn-flex-item>
</tn-v-box>
</tn-h-box>
</script>
<div id="app" class="tn-absolute-fit tn-flex-box" direction="column">
<h2>Flex Layout</h2>
<layout size="1"></layout>
</div>
<script type="text/javascript">
var Layout = Vue.component('Layout', {
template: '#tn-body',
})
var app = new Vue({
el: '#app',
components: {
layout: Layout,
},
})
</script>
</body>
</html>