源代码
<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>