Please see the tour component for more information on setting up a tour modal. Click the Take the Tour button in the callout below to see how a tour modal functions.
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 |
Modal Tour
<button id="new-feature">New Feature</button>
<dk-callout
target="#new-feature"
id="hi"
tour-id="tour"
open="true">
Unformatted text with no headline tag.
</dk-callout>
<dk-tour id="tour">
<dk-tour-modal>
<img
src="https://images.unsplash.com/photo-1591949150520-3d29b3cb62bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8ixlib=rb-1.2.1auto=formatfit=cropw=1350q=80"
alt=""
slot="step-img"
/>
<article slot="content">
<h3>Step 1 Headline</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
</article>
</dk-tour-modal>
<dk-tour-modal>
<img
src="https://images.unsplash.com/photo-1591949150520-3d29b3cb62bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8ixlib=rb-1.2.1auto=formatfit=cropw=1350q=80"
alt=""
slot="step-img"
/>
<article slot="content">
<h3>Step 2 Headline</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
<a href="http://google.com">
We have the doom
</a>
</article>
</dk-tour-modal>
<dk-tour-modal>
<img
src="https://images.unsplash.com/photo-1591949150520-3d29b3cb62bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8ixlib=rb-1.2.1auto=formatfit=cropw=1350q=80"
alt=""
slot="step-img"
/>
<article slot="content">
<h3>Step 3 Headline</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
</article>
</dk-tour-modal>
<dk-tour-modal>
<article slot="content">
<h3>
Step 4 Headline - No Image
</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
</article>
</dk-tour-modal>
</dk-tour>