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