Check with your designers to help you design this section
Check with your designers to help you design this section
Step Tracker uses Twitter Bootstrap Wizard 1.4.2 and is not included in raul.js file. You will have to add it separately if you want to use it. Below you can see an example of how to include the Step Tracker to your project.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous"
/>
<link
href="https://cdn.realpage.com/raul/v2.78.3/css/raul.min.gz.css"
rel="stylesheet"
/>
<!-- Add the plugin after raul -->
<link
href="https://cdn.realpage.com/raul/v2.78.3/css/plugins/raul-plugin-step-tracker.min.css"
rel="stylesheet"
/>
<!-- Code on page -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
crossorigin="anonymous"
></script>
<script
src="https://cdn.realpage.com/raul/v2.78.3/js/raul.min.gz.js">
</script>
<!-- Add the plugin after raul -->
<script
src="https://cdn.realpage.com/raul/v2.78.3/js/plugins/raul-plugin-step-tracker.min.js"
></script>
You can simply add the markup below with the rootWizard id on the wrapper and the
plugin will bind on document load.
<div id="rootwizard" class="step-track-wrap">
<div class="navbar">
<div class="navbar-inner">
<ul class="row nav nav-tabs nav-justified nav-step-track" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#tab1" data-toggle="tab">1. Step</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#tab2" data-toggle="tab">2. Step</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#tab3" data-toggle="tab">3. Step</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#tab4" data-toggle="tab">4. Step</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#tab5" data-toggle="tab">5. Step</a>
</li>
</ul>
</div>
</div>
<div class="raul-tab-content tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">1. Step content</div>
<div role="tabpanel" class="tab-pane" id="tab2">2. Step content</div>
<div role="tabpanel" class="tab-pane" id="tab3">3. Step content</div>
<div role="tabpanel" class="tab-pane" id="tab4">4. Step content</div>
<div role="tabpanel" class="tab-pane" id="tab5">5. Step content</div>
<ul class="pager wizard nav-step-track-footer align-items-center row">
<li class="col-sm-2 col-xs-4 previous hidden d-none">
<div class="prev-btn">
<a href="#">Prev</a>
</div>
</li>
<li class="col-sm-10 col-xs-4">
<hr>
</li>
<li class="col-sm-2 col-xs-4 next">
<div class="next-btn">
<a href="#">Next</a>
</div>
</li>
</ul>
</div>
</div>
You can also use a different ID and instantiate the tracker via a JavaScript API. This will allow you to pass options for customization.
new RAUL.plugins.StepTracker('#my-id', { options })
| Option | Type | Parameters (optional) | Default | Description |
|---|---|---|---|---|
| tabClass |
string
|
"nav-step-track"
|
Is used to select it's li children and set their width equally.
|
|
| footerClass |
string
|
"nav-step-track-footer"
|
Is used to toggle it's '.prev' children
if the active tab is not the first one.
|
|
| finishButtonText |
string
|
"done"
|
Sets finish button text. | |
| onInit |
function
|
tab, navigation, nextTabIndex | None | Fired when plugin is initialized. |
| onShow |
function
|
tab, navigation, nextTabIndex | None | Fired when plugin data is shown. |
| onNext |
function
|
tab, navigation, nextTabIndex | None |
Fired when next (.wizard li.next)
button is clicked (return false to disable moving to the next step).
|
| onPrevious |
function
|
tab, navigation, nextTabIndex | None |
Fired when previous (.wizard li.previous)
button is clicked (return false to disable moving to the previous step).
|
| onFirst |
function
|
tab, navigation, nextTabIndex | None |
Fired when first (.wizard li.first)
button is clicked (return false to disable moving to the first step).
|
| onLast |
function
|
tab, navigation, nextTabIndex | None |
Fired when last (.wizard li.last) button is clicked
(return false to disable moving to the last step).
|
| onFinish |
function
|
tab, navigation, nextTabIndex | None |
Fired when done (.wizard li.finish) button is clicked.
|
| onTabClick |
function
|
tab, navigation, index, clickedIndex | None | Fired when tab is clicked (return false to disable moving to the next step). |
| onTabChange |
function
|
tab, navigation, index, clickedIndex | None | Fired when a tab is changed. |