Please see the Tour component for an example of what it looks like to use the dk-tour-modal.
Slots
To make use of a slot, add the slot="NAME" to any kind of element that you want inserted into the slot of the web component. A slot allows you to control the markup and styling of what content you put into it.
<div slot="slot-name">Additional Markup</div>
| Slot | Description |
|---|---|
content | Use this slot to insert the text content for your step. |
step-img | Use this slot with an img element to insert an image to your modal step. |
Properties
Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
backText | back-text | Set what text should be in the button that is used for the back action | string | null |
dismissText | dismiss-text | Set what text should be in the button that is used for the dismiss action | string | null |
isOpen | open | This prop reflects the open/closed state of the callout. You can set this property to control if the callout is opened or closed. | boolean | false |
nextText | next-text | Set what text should be in the button that is used for the next action | string | null |