Sha256: f9004f5ad16bf48a858b06c27c459abcd432168167796af62dad10af653cec1a
Contents?: true
Size: 1.56 KB
Versions: 948
Compression:
Stored size: 1.56 KB
Contents
import React, { useState } from 'react'
import { Button, Walkthrough } from 'playbook-ui'
const WalkthroughDefault = (props) => {
const [state, setState] = useState({
run: false,
steps: [
{
title: 'Example title',
content:
'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
target: '.example',
},
{
title: 'Toggle',
content:
'By default the walkthrough kit will cycle through each step provided.',
target: '.pb_toggle_control',
},
{
title: 'Top Nav',
content:
'By default the walkthrough kit will cycle through each step provided.',
target: '.pb--page--topNav',
},
],
})
return (
<div>
<div
className="example"
style={{ 'display': 'inline' }}
>
{'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
</div>
<br />
<br />
<Button
onClick={() => {
setState({ ...state,
run: true,
})
}}
>
{'Start Tour'}
</Button>
<br />
<br />
<Button
onClick={() => {
setState({
...state,
run: false,
})
}}
>
{'Reset/Stop Tour'}
</Button>
<Walkthrough
run={state.run}
steps={state.steps}
{...props}
/>
</div>
)
}
export default WalkthroughDefault
Version data entries
948 entries across 948 versions & 2 rubygems