ant-design-vue/components/tabs/demo/icon.vue

44 lines
833 B
Vue
Raw Normal View History

2017-12-01 04:21:43 +00:00
<template>
2017-12-08 03:46:53 +00:00
<div>
2017-12-01 04:21:43 +00:00
<Tabs defaultActiveKey="2">
2018-01-19 03:47:06 +00:00
<TabPane :tab="(h) => renderTab(h, '1', 'apple')" key="1">
2017-12-01 04:21:43 +00:00
Tab 1
</TabPane>
2018-01-19 03:47:06 +00:00
<TabPane :tab="(h) => renderTab(h, '2', 'android')" key="2">
2017-12-01 04:21:43 +00:00
Tab 2
</TabPane>
</Tabs>
2017-12-08 03:46:53 +00:00
<Tabs defaultActiveKey="2">
<TabPane key="1">
2018-01-19 03:47:06 +00:00
<span slot="tab">
<Icon type="apple" />
Tab 1
</span>
2017-12-08 03:46:53 +00:00
Tab 1
</TabPane>
<TabPane key="2">
2018-01-19 03:47:06 +00:00
<span slot="tab">
<Icon type="android" />
Tab 2
</span>
2017-12-08 03:46:53 +00:00
Tab 2
</TabPane>
</Tabs>
</div>
2017-12-01 04:21:43 +00:00
</template>
<script>
import { Tabs, Icon } from 'antd'
export default {
methods: {
renderTab (h, tabKey, iconType) {
return h('span', [<Icon type={iconType} />, `Tab ${tabKey}`])
},
},
components: {
Tabs,
TabPane: Tabs.TabPane,
Icon,
},
}
</script>