TabControlExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="TabControl" class="TabControl_TabControl">
        <ng-template let-model>
            <div class="TabControl">
                <wm-tabcontrol #tabControl1 [id]="'tabControl1'" [windowModel]="model" class="tabControl1" tabindex="1"
                (TabSelect)="TabSelect($event)"
                ></wm-tabcontrol>
                <wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="39">TabControl</wm-label>
                <wm-button #button1 id="button1" [model]="model.button1" class="button1" tabindex="40" (Click)="button1_Click()"></wm-button>
                <wm-textbox #textBox1 id="textBox1" [model]="model.textBox1" class="textBox1" tabindex="41" ></wm-textbox>
                <wm-label #label2 id="label2" [model]="model.label2" class="label2" tabindex="42">Name</wm-label>
                <wm-label #label5 id="label5" [model]="model.label5" class="label5" tabindex="43">New Page</wm-label>
                <wm-button #button2 id="button2" [model]="model.button2" class="button2" tabindex="44" (Click)="button2_Click()"></wm-button>
                <wm-textbox #textBox2 id="textBox2" [model]="model.textBox2" class="textBox2" tabindex="45" ></wm-textbox>
                <wm-label #label3 id="label3" [model]="model.label3" class="label3" tabindex="46">Title</wm-label>
                <wm-label #label4 id="label4" [model]="model.label4" class="label4" tabindex="47">Edit Page</wm-label>
            </div>
        </ng-template>
    </wm-window>
</div>

TabControlExample.css

@import "../../../../../assets/style/tab-control.css";

.TabControl_TabControl {
    left: -1px;
    top: -1px;
}
.TabControl_TabControl .TabControl {
    width: 594px;
    height: 345px;
    overflow: hidden;
}
.TabControl_TabControl .tabControl1 {
    left: 12px;
    top: 61px;
    width: 570px;
    height: 151px;
    position: absolute;
}
.TabControl_TabControl .label1 {
    width: auto;
    font-size: 14.25pt;
    left: 16px;
    top: 21px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TabControl_TabControl .button1 {
    left: 209px;
    top: 312px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.TabControl_TabControl .button2 {
    left: 484px;
    top: 312px;
    width: 75px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
.TabControl_TabControl .textBox1 {
    left: 25px;
    top: 313px;
    width: 168px;
    height: 23px;
    position: absolute;
}
.TabControl_TabControl .textBox2 {
    left: 300px;
    top: 313px;
    width: 168px;
    height: 23px;
    position: absolute;
}
.TabControl_TabControl .label2 {
    width: auto;
    left: 25px;
    top: 286px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TabControl_TabControl .label3 {
    width: auto;
    left: 300px;
    top: 286px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TabControl_TabControl .label5 {
    width: auto;
    font-size: 12pt;
    left: 25px;
    top: 255px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.TabControl_TabControl .label4 {
    width: auto;
    font-size: 12pt;
    left: 300px;
    top: 255px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}

TabPage1Example.html

<wm-tabpage #TabControltabPage1 id="tabPage1" [model]="model.tabPage1" class="TabControl_TabControltabPage1" tabindex="0">
<wm-button #button3 id="button3" [model]="model.button3" class="button3" tabindex="1"></wm-button>
</wm-tabpage>

TabPage1Example.css

.TabControl_TabControltabPage1 .TabControltabPage1 {
    background-color: Transparent;
    color: rgba(0, 0, 0, 1);
    left: 4px;
    top: 24px;
    width: 562px;
    height: 123px;
    position: absolute;
}
.TabControl_TabControltabPage1 .button3 {
    left: 9px;
    top: 94px;
    width: 105px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}

TabPage2Example.html

<wm-tabpage #TabControltabPage2 id="tabPage2" [model]="model.tabPage2" class="TabControl_TabControltabPage2" tabindex="0">
<wm-button #button5 id="button5" [model]="model.button5" class="button5" tabindex="46"></wm-button>
</wm-tabpage>

TabPage2Example.css

.TabControl_TabControltabPage2 .TabControltabPage2 {
    left: 4px;
    top: 24px;
    width: 562px;
    height: 123px;
    position: absolute;
}
.TabControl_TabControltabPage2 .button5 {
    left: 9px;
    top: 94px;
    width: 105px;
    height: 23px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}