Browse Source

tabs support size large

pull/9/head
tjz 7 years ago
parent
commit
12facb0623
  1. 18
      components/tabs/demo/size.vue
  2. 6
      components/tabs/index.vue

18
components/tabs/demo/size.vue

@ -1,16 +1,30 @@
<template>
<Tabs defaultActiveKey="2" size="small">
<div>
<RadioGroup v-model="size" style="margin-bottom: 16px">
<RadioButton value="small">Small</RadioButton>
<RadioButton value="default">Default</RadioButton>
<RadioButton value="large">Large</RadioButton>
</RadioGroup>
<Tabs defaultActiveKey="2" :size="size">
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
</Tabs>
</div>
</template>
<script>
import { Tabs } from 'antd'
import { Tabs, Radio } from 'antd'
export default {
data () {
return {
size: 'small',
}
},
components: {
Tabs,
TabPane: Tabs.TabPane,
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
},
}
</script>

6
components/tabs/index.vue

@ -23,7 +23,7 @@ export default {
},
size: {
validator (value) {
return ['default', 'small'].includes(value)
return ['default', 'small', 'large'].includes(value)
},
},
animated: { type: [Boolean, Object], default: undefined },
@ -94,7 +94,9 @@ export default {
tabPaneAnimated = animated === undefined ? false : tabPaneAnimated
}
const cls = {
[`${prefixCls}-mini`]: size === 'small' || size,
[`${prefixCls}-small`]: size === 'small',
[`${prefixCls}-large`]: size === 'large',
[`${prefixCls}-default`]: size === 'default',
[`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
[`${prefixCls}-card`]: type.indexOf('card') >= 0,
[`${prefixCls}-${type}`]: true,

Loading…
Cancel
Save