tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

added a HTML wrapper to make it easier to style

Browse Source
This commit is contained in:
Nivanka Fonseka 2023-03-20 15:45:30 +13:00
parent 1f3747cbaf
commit 1d198ca05d
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
templates/SilverStripe/UserForms/Form/Includes/UserFormProgress.ss
View File

@ -1,19 +1,21 @@
<% if $Steps.Count > 1 %>
<div id="userform-progress" class="userform-progress" aria-hidden="true" style="display:none;">
<p>Page <span class="current-step-number">1</span> of <span class="total-step-number">$Steps.Count</span></p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$Steps.Count"></div>
</div>
<nav aria-label="Pages in this form">
<ul class="step-buttons">
<% loop $Steps %>
<li class="step-button-wrapper<% if $IsFirst %> current<% end_if %>" data-for="$Name">
<%-- Remove js-align class to remove javascript positioning --%>
<button class="step-button-jump js-align" disabled="disabled" data-step="$Pos"><% if $Top.ButtonText %>$Top.ButtonText <% end_if %>$Pos</button>
</li>
<% end_loop %>
</ul>
</nav>
<div class="userform-progress-navigator">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$Steps.Count"></div>
</div>
<nav aria-label="Pages in this form">
<ul class="step-buttons">
<% loop $Steps %>
<li class="step-button-wrapper<% if $IsFirst %> current<% end_if %>" data-for="$Name">
<%-- Remove js-align class to remove javascript positioning --%>
<button class="step-button-jump js-align" disabled="disabled" data-step="$Pos"><% if $Top.ButtonText %>$Top.ButtonText <% end_if %>$Pos</button>
</li>
<% end_loop %>
</ul>
</nav>
</div>
</div>
<h2 class="progress-title"></h2>
<% end_if %>