<template>
  <div>
		<h2>Tab Style</h2>
		<div class="fitem">
			<Label for="s1">plain:</Label>
			<SwitchButton inputId="s1" v-model="plain"></SwitchButton>
		</div>
		<div class="fitem">
			<Label for="s2">narrow:</Label>
			<SwitchButton inputId="s2" v-model="narrow"></SwitchButton>
		</div>
		<div class="fitem">
			<Label for="s3">justified:</Label>
			<SwitchButton inputId="s3" v-model="justified"></SwitchButton>
		</div>
		<Tabs :plain="plain" :narrow="narrow" :justified="justified" style="height:150px">
			<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 {
      plain: false,
      narrow: false,
      justified: false
    };
  }
};
</script>
<style>
.fitem {
  margin-bottom: 4px;
}
</style>