Skip to content

Tab Widget

Jump to bottom
Julio Carneiro edited this page Oct 23, 2017 · 2 revisions

This is a very simple Tab widget component.

It is made of actually two Components, with the following selectors:

  • tabs: is the wrapper selector for all tabs
  • tab: is the selector for individual tabs, and its content can be anything

Tab Input

The Tab component has the following input variables:

  • title: the tab title text

Example usage

Here is the example HTML for the sample above:

    <tabs class="nav nav-tabs">
        <tab [title]="'Taste Profile Info'">
            <div style="height: 450px;">
                <userprofile-info [currentRecord]="currentRecord"></userprofile-info>
            </div>
        </tab>

        <tab [title]="'Edit Taste Profile'" *ngIf="currentRecord.isRecordLoaded()">
            <div style="height: 450px;">
                <edit-taste-profile [currentRecord]="currentRecord" (profileUpdated)="profileUpdated()"></edit-taste-profile>
            </div>
        </tab>

        <tab [title]="'Profile Genes'" *ngIf="currentRecord.isRecordLoaded()">
            <div style="height: 450px;">
                <profilegenes-info [record]="currentRecord" (profileUpdated)="profileUpdated()"></profilegenes-info>
            </div>
        </tab>

        <tab [title]="'Viewer Content'" *ngIf="currentRecord.isRecordLoaded()">
            <div style="height: 450px;">
                <viewercontent-info [record]="currentRecord"></viewercontent-info>
            </div>
        </tab>

        <tab [title]="'Recommendations'" *ngIf="currentRecord.isRecordLoaded()">
            <div style="height: 450px;">
                <profilerecommendations-info [record]="currentRecord"></profilerecommendations-info>
            </div>
        </tab>


        <div class="buttonBar">
            <button class="regularButton" style="margin-left:20px;width:90px;" (click)="saveRecord()" [disabled]="!currentRecord.recordIsDirty()">SAVE</button>
        </div>
    </tabs>
Clone this wiki locally