Tabbed Controls

JSPA includes a special data-binding option to allow Bootstrap 4 tab controls to be easily setup. The work is all done by assigning the attribute data-bind-control the value of "tabs"

Example

Given the template:

<h1>Tab Control Example</h1>
<div>
    <ul class="nav nav-tabs" role="tablist" data-bind-control="tabs">
       <li class="nav-item">
            <span class="nav-link active" data-toggle="collapse" data-target="tab-control-tab1">
                Tab 1
            </span>
        </li>
        <li class="nav-item">
            <span class="nav-link" data-toggle="collapse" data-target="tab-control-tab2">
                Tab 2
            </span>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab-control-tab1">Tab 1 Content</div>
        <div class="collapse" id="tab-control-tab2">Tab 2 Content</div>
    </div>
</div>

And the component:

class Example extends Component {
    constructor() {
        // uses the default name for the template - which is "content"
        super("Components\example\example-template.html"); 
    }

    public draw(args: any): Promise<JQuery> {
        return new Promise((resolve) => {
            // no data passed to be bound, so whole component used
            let $page = this.getTemplate("content");
            resolve($page);
        });
    }
}

The output would be: (In this example it's the same as the template)

<h1>Tab Control Example</h1>
<div>
    <ul class="nav nav-tabs" role="tablist" data-bind-control="tabs">
       <li class="nav-item">
            <span class="nav-link active" data-toggle="collapse" data-target="tab-control-tab1">
                Tab 1
            </span>
        </li>
        <li class="nav-item">
            <span class="nav-link" data-toggle="collapse" data-target="tab-control-tab2">
                Tab 2
            </span>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab-control-tab1">Tab 1 Content</div>
        <div class="collapse" id="tab-control-tab2">Tab 2 Content</div>
    </div>
</div>