javascripthtmluser-interfaceaspnetboilerplateformwizard

How to use _formwizard.scss in ABP template?


ASP.NET Boilerplate (ABP) template contains a file named _formwizard.scss, containing CSS styles like:

.wizard,
.tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard a,
.tabcontrol a {
    outline: 0;
}

/* ... */

Where does this file come from and how do I use it?

Thanks.


Solution

  • It comes from AdminBSB, using the jQuery Steps plugin.

    You can use it as shown in their demo: https://gurayyarar.github.io/AdminBSBMaterialDesign/pages/forms/form-wizard.html

    <div id="wizard_horizontal">
      <h2>First Step</h2>
      <section>
        <p>
          Lorem ipsum...
        </p>
      </section>
    
      <h2>Second Step</h2>
      <section>
        <p>
          Donec mi sapien...
        </p>
      </section>
    </div>
    
    $('#wizard_horizontal').steps({
        headerTag: 'h2',
        bodyTag: 'section',
        transitionEffect: 'slideLeft',
        onInit: function (event, currentIndex) {
            setButtonWavesEffect(event);
        },
        onStepChanged: function (event, currentIndex, priorIndex) {
            setButtonWavesEffect(event);
        }
    });