@@ -24,7 +24,15 @@ type FlowNavType = {
24
24
} ;
25
25
26
26
export default function Tabs ( props : TabsProps ) {
27
- const { className, children, type = 'default' , activeKey : _ , onTabClick, ...elementProps } = props ;
27
+ const {
28
+ prefixCls = 'w-tabs' ,
29
+ className,
30
+ children,
31
+ type = 'default' ,
32
+ activeKey : _ ,
33
+ onTabClick,
34
+ ...elementProps
35
+ } = props ;
28
36
29
37
const [ activeKey , setActiveKey ] = useState ( props . activeKey ) ;
30
38
const [ slideStyle , setSlideStyle ] = useState ( { width : 0 , left : 0 } ) ;
@@ -106,13 +114,13 @@ export default function Tabs(props: TabsProps) {
106
114
}
107
115
108
116
return (
109
- < Styled . TabsWarp className = { className } { ...elementProps } >
117
+ < Styled . TabsWarp className = { [ prefixCls , className ] . filter ( Boolean ) . join ( ' ' ) . trim ( ) } { ...elementProps } >
110
118
< Styled . TabsDivFlex >
111
119
< Styled . TabsDivHidden >
112
- < Styled . TabsDivBar ref = { divContentRef } >
113
- < Styled . TabsDivNav >
120
+ < Styled . TabsDivBar className = { ` ${ prefixCls } -bar` } ref = { divContentRef } >
121
+ < Styled . TabsDivNav className = { ` ${ prefixCls } -nav` } >
114
122
{ renderNav ( children ) }
115
- < Styled . TabsDivSlide style = { slideStyle } />
123
+ < Styled . TabsDivSlide className = { ` ${ prefixCls } -slide` } style = { slideStyle } />
116
124
</ Styled . TabsDivNav >
117
125
</ Styled . TabsDivBar >
118
126
</ Styled . TabsDivHidden >
@@ -122,12 +130,12 @@ export default function Tabs(props: TabsProps) {
122
130
placement = "bottomRight"
123
131
visibleArrow = { false }
124
132
content = {
125
- < Styled . TabsNavHidden >
133
+ < Styled . TabsNavHidden className = { ` ${ prefixCls } -nav-hidden` } >
126
134
{ renderNav ( hiddenNav . map ( ( idx ) => ( children as Array < React . ReactElement > ) [ idx ] ) ) }
127
135
</ Styled . TabsNavHidden >
128
136
}
129
137
>
130
- < Styled . TabsFlowContent onClick = { showHideenNav } >
138
+ < Styled . TabsFlowContent onClick = { showHideenNav } className = { ` ${ prefixCls } -flow-content` } >
131
139
< span > …</ span >
132
140
</ Styled . TabsFlowContent >
133
141
</ Popover >
@@ -148,6 +156,7 @@ export default function Tabs(props: TabsProps) {
148
156
return null ;
149
157
}
150
158
const divProps : HTMLDivProps = {
159
+ className : `${ prefixCls } -item` ,
151
160
children : item . props . label ,
152
161
} ;
153
162
if ( ! item . props . disabled ) {
0 commit comments