@@ -3,8 +3,8 @@ import type { TourStepProps } from '../interface';
3
3
import classNames from 'classnames' ;
4
4
import pickAttrs from 'rc-util/lib/pickAttrs' ;
5
5
6
- export type DefaultPanelProps = Exclude < TourStepProps , " closable" > & {
7
- closable : Exclude < TourStepProps [ " closable" ] , boolean > ;
6
+ export type DefaultPanelProps = Exclude < TourStepProps , ' closable' > & {
7
+ closable : Exclude < TourStepProps [ ' closable' ] , boolean > ;
8
8
} ;
9
9
10
10
export default function DefaultPanel ( props : DefaultPanelProps ) {
@@ -20,14 +20,21 @@ export default function DefaultPanel(props: DefaultPanelProps) {
20
20
onFinish,
21
21
className,
22
22
closable,
23
+ classNames : tourClassNames ,
24
+ styles,
23
25
} = props ;
24
26
const ariaProps = pickAttrs ( closable || { } , true ) ;
25
- const closeIcon = closable ?. closeIcon ?? < span className = { `${ prefixCls } -close-x` } > ×</ span > ;
27
+ const closeIcon = closable ?. closeIcon ?? (
28
+ < span className = { `${ prefixCls } -close-x` } > ×</ span >
29
+ ) ;
26
30
const mergedClosable = ! ! closable ;
27
31
28
32
return (
29
- < div className = { classNames ( `${ prefixCls } -content` , className ) } >
30
- < div className = { `${ prefixCls } -inner` } >
33
+ < div className = { classNames ( `${ prefixCls } -pannel` , className ) } >
34
+ < div
35
+ className = { classNames ( `${ prefixCls } -section` , tourClassNames ?. section ) }
36
+ style = { styles ?. section }
37
+ >
31
38
{ mergedClosable && (
32
39
< button
33
40
type = "button"
@@ -39,24 +46,49 @@ export default function DefaultPanel(props: DefaultPanelProps) {
39
46
{ closeIcon }
40
47
</ button >
41
48
) }
42
- < div className = { `${ prefixCls } -header` } >
43
- < div className = { `${ prefixCls } -title` } > { title } </ div >
49
+ < div
50
+ className = { classNames ( `${ prefixCls } -header` , tourClassNames ?. header ) }
51
+ style = { styles ?. header }
52
+ >
53
+ < div
54
+ className = { classNames ( `${ prefixCls } -title` , tourClassNames ?. title ) }
55
+ style = { styles ?. title }
56
+ >
57
+ { title }
58
+ </ div >
44
59
</ div >
45
- < div className = { `${ prefixCls } -description` } > { description } </ div >
46
- < div className = { `${ prefixCls } -footer` } >
60
+ < div
61
+ className = { classNames (
62
+ `${ prefixCls } -description` ,
63
+ tourClassNames ?. description ,
64
+ ) }
65
+ style = { styles ?. description }
66
+ >
67
+ { description }
68
+ </ div >
69
+ < div
70
+ className = { classNames ( `${ prefixCls } -footer` , tourClassNames ?. footer ) }
71
+ style = { styles ?. footer }
72
+ >
47
73
< div className = { `${ prefixCls } -sliders` } >
48
74
{ total > 1
49
75
? [ ...Array . from ( { length : total } ) . keys ( ) ] . map ( ( item , index ) => {
50
- return (
51
- < span
52
- key = { item }
53
- className = { index === current ? 'active' : '' }
54
- />
55
- ) ;
56
- } )
76
+ return (
77
+ < span
78
+ key = { item }
79
+ className = { index === current ? 'active' : '' }
80
+ />
81
+ ) ;
82
+ } )
57
83
: null }
58
84
</ div >
59
- < div className = { `${ prefixCls } -buttons` } >
85
+ < div
86
+ className = { classNames (
87
+ `${ prefixCls } -actions` ,
88
+ tourClassNames ?. actions ,
89
+ ) }
90
+ style = { styles ?. actions }
91
+ >
60
92
{ current !== 0 ? (
61
93
< button className = { `${ prefixCls } -prev-btn` } onClick = { onPrev } >
62
94
Prev
0 commit comments