AntDesign创建⼀个新⼿引导界⾯安装driver.js
npm install --save driver.js
⽰例代码
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';ant design
const {TabPane} = Tabs
export default class Demo extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
componentDidMount() {
const driver = new Driver();
const btnTitle = {
doneBtnText: '完成', // Text on the final button
closeBtnText: '关闭', // Text on the close button for this step
nextBtnText: '下⼀步', // Next button text for this step
prevBtnText: '上⼀步',
}
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
title: '项⽬⼀',
description: '这是项⽬⼀的介绍',
position: 'top'
},
...btnTitle
},
{
element: '#second-element-introduction',
popover: {
title: '项⽬⼆',
description: '这是项⽬⼆的介绍',
position: 'top'
}, ...btnTitle
},
{
element: '#third-element-introduction',
popover: {
title: '项⽬三',
description: '这是项⽬三的介绍',
position: 'buttom'
}, ...btnTitle
},
]
);
driver.start()
}
render() {
return (
<Tabs>
<TabPane tab="item1" key="1">
<div id="first-element-introduction">item1</div>
<div id="second-element-introduction">item2</div>
<div id="third-element-introduction">item3</div>
</TabPane>
</Tabs>
)
}
}