<template>
  <div>
		<h2>Tab Position</h2>
		<div style="margin-bottom:20px">
			<ComboBox :data="positions" v-model="position" :editable="false">
			</ComboBox>
		</div>
		<Tabs :tabPosition="position" style="height:250px">
			<TabPanel :title="'Tab1'">
				<p>Tab Panel1</p>
			</TabPanel>
			<TabPanel :title="'Tab2'">
				<p>Tab Panel2</p>
			</TabPanel>
			<TabPanel :title="'Tab3'">
				<p>Tab Panel3</p>
			</TabPanel>
			<TabPanel :title="'Help'" :closable="true" iconCls="icon-help">
				<p>This is the help content.</p>
			</TabPanel>
		</Tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: "top",
      positions: [
        { value: "top", text: "Top" },
        { value: "bottom", text: "Bottom" },
        { value: "left", text: "Left" },
        { value: "right", text: "Right" }
      ]
    };
  }
};
</script>