You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< docs >
-- -
order : 5
title :
zh - CN : 大小
en - US : Size
-- -
# # zh - CN
大号页签用在页头区域 ， 小号用在弹出框等较狭窄的容器内 。
# # en - US
Large size tabs are usally used in page header , and small size could be used in Modal .
< / docs >
< template >
< div >
< a -radio -group v -model :value ="size" style = "margin-bottom: 16px" >
< a -radio -button value = "small" > Small < / a - r a d i o - b u t t o n >
< a -radio -button value = "default" > Default < / a - r a d i o - b u t t o n >
< a -radio -button value = "large" > Large < / a - r a d i o - b u t t o n >
< / a - r a d i o - g r o u p >
< a -tabs v -model :activeKey ="activeKey" :size ="size" >
< a -tab -pane key = "1" tab = "Tab 1" > Content of tab 1 < / a - t a b - p a n e >
< a -tab -pane key = "2" tab = "Tab 2" > Content of tab 2 < / a - t a b - p a n e >
< a -tab -pane key = "3" tab = "Tab 3" > Content of tab 3 < / a - t a b - p a n e >
< / a - t a b s >
< / div >
< / template >
< script lang = "ts" >
import { defineComponent , ref } from 'vue' ;
import type { TabsProps } from 'ant-design-vue' ;
export default defineComponent ( {
setup ( ) {
const size = ref < TabsProps [ ' size ' ] > ( 'small' ) ;
const activeKey = ref ( '1' ) ;
return {
size ,
activeKey ,
} ;
} ,
} ) ;
< / script >
