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> <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 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane> <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane> <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
</Tabs> </Tabs>
</div>
</template> </template>
<script> <script>
import { Tabs } from 'antd' import { Tabs, Radio } from 'antd'
export default { export default {
data () {
return {
size: 'small',
}
},
components: { components: {
Tabs, Tabs,
TabPane: Tabs.TabPane, TabPane: Tabs.TabPane,
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
}, },
} }
</script> </script>

6
components/tabs/index.vue

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

Loading…
Cancel
Save