-
Notifications
You must be signed in to change notification settings - Fork 189
Show navigation style linear step progress to user
Ben Richardson edited this page Apr 24, 2020
·
1 revision
You can get an array of all steps using:
wizard_steps
And you can get your current step using:
step
With these you can build some custom UI around all of the steps available and the current one the user is on.
There are several helper methods included to help you style and customize the experience.
past_step?(step)
future_step?(step)
previous_step?(step)
next_step?(step)
If you have some experience making wizard progress look great, drop me a line and I would love to include it here.
One example:
On helper:
def tutorial_progress_bar
content_tag(:section, class: "content") do
content_tag(:div, class: "navigator") do
content_tag(:ol) do
wizard_steps.collect do |every_step|
class_str = "unfinished"
class_str = "current" if every_step == step
class_str = "finished" if past_step?(every_step)
concat(
content_tag(:li, class: class_str) do
link_to I18n.t(every_step), wizard_path(every_step)
end
)
end
end
end
end
end
Our view structure looks like this.
<section class="content">
<div class="navigator">
<ol>
<li class="finished">Download
<li class="current">Task
<li class="unfinished">Upload
<li class="unfinished">Questionnaire
</ol>
</div>
</section>