Demo Mode
Give your site visitors a virtual tour of the page!
Usage
There are a few steps required to apply this component.
Example
Step 1
Step 2
Step 3
Step 4
Step 5
Step 8
You will need an element with a data-f-demo-mode
attribute.
<button class="f-btn f-btn-primary f-demo-start" data-f-demo-mode="{ overlay : '#demo-overlay' }">Show Me</button>
This will instantiate the component via a click event.
A modal element something like the below to display the steps in.
<div class="f-modal f-open">
<div id="demo-overlay" class="f-demo-mode">
<span class="f-demo-nav">
<button role="button" class="f-btn f-btn-small f-btn-icon f-demo-restart" title="Restart Demo"><i class="material-icons">refresh</i></button>
<button role="button" class="f-btn f-btn-small f-btn-icon f-btn-danger f-demo-close" title="Close demo"><i class="material-icons">close</i></button>
</span>
<div class="f-demo-message"></div>
<button role="button" class="f-btn f-demo-previous-step" title="Go to previous step">Previous</button>
<button role="button" class="f-btn f-btn-primary f-demo-next-step" title="Go to next step">Next</button>
</div>
</div>
The element you would like to add to the demo requires a data-f-demo-step=""
attribute (starting at 1) and either data-f-demo-message
or data-f-demo-selector
attributes. The first simply fills the demo modal with the text provided, the selector requires an element on the page with a class or ID of the selector used.
Here is the HTML for this step:
<div class="f-width-medium-1-3" data-f-demo-step="3" data-f-demo-selector=".f-demo-selector-test">
<div class="f-panel f-panel-box f-panel-box-primary f-panel-space">
<h2 class="f-panel-title f-text-center">Step 3</h2>
</div>
</div>
Here is the HTML for this content:
<div class="f-demo-selector f-demo-step-4">
<p>Here is the HTML for this content:</p>
</div>
The class f-demo-selector
is required to hide the element on the page. The subsequent class is how we reference this element to show for this demo item: data-f-demo-selector=".f-demo-step-4"
Note: To create a wider note for more content use the class f-demo-large
or f-demo-xlarge
on the demo step HTML.
Using a selector to display HTML
A link
Step 6
Step 7
There are a few other options you can set via data attributes. For example, if you want to jump from anywhere to a step just add the attribute data-f-demo-step-jump=""
with the number of the step you'd like to jump to.
For example: jumps to step 2 (you can jump back from there). These step jumps can be placed anywhere.
Fin