alpaca/src/templates/web-edit/wizard.html

Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide

<script type="text/x-handlebars-template">

    <div class="alpaca-wizard">

        <!-- nav bar -->
        {{#if showSteps}}
        <div class="alpaca-wizard-nav">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid alpaca-wizard-back">
                    <ul class="nav navbar-nav">
                        {{#each steps}}
                        <li data-alpaca-wizard-step-index="{{@index}}">
                            <div class="holder">
                                <div class="title">{{{title}}}</div>
                                <div class="description">{{{description}}}</div>
                            </div>
                            <div class="chevron"></div>
                        </li>
                        {{/each}}
                    </ul>
                </div>
            </nav>
        </div>
        {{/if}}

        <!-- wizard progress bar -->
        {{#if showProgressBar}}
        <div class="alpaca-wizard-progress-bar">
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                </div>
            </div>
        </div>
        {{/if}}

        {{#if wizardTitle}}
            <h3>{{{wizardTitle}}}</h3>
        {{/if}}
        {{#if wizardDescription}}
            <h4>{{{wizardDescription}}}</h4>
        {{/if}}

        <!-- wizard steps -->
        <div class="alpaca-wizard-steps">

        </div>

        <!-- wizard buttons -->
        <div class="alpaca-wizard-buttons">

            <div class="pull-left">
                {{#each buttons}}
                    {{#compare align "left"}}
                        <button type="{{type}}" {{#if id}}id="{{id}}"{{/if}} class="{{../view.styles.button}}" data-alpaca-wizard-button-key="{{@key}}" {{#each attributes}} {{@key}}="{{this}}"{{/each}}>{{{title}}}</button>
                    {{/compare}}
                {{/each}}
            </div>

            <div class="pull-right">
                {{#each buttons}}
                    {{#compare align "right"}}
                        <button type="{{type}}" {{#if id}}id="{{id}}"{{/if}} class="{{../view.styles.button}}" data-alpaca-wizard-button-key="{{@key}}" {{#each attributes}} {{@key}}="{{this}}"{{/each}}>{{{title}}}</button>
                    {{/compare}}
                {{/each}}
            </div>

            <div style="clear:both"></div>

        </div>

    </div>

</script>