jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
58 lines • 2.06 kB
HTML
<jqxTabs [theme]="'material'" #jqxTabs
[width]="getWidth()" [height]="230" [keyboardNavigation]="false">
<ul>
<li style="margin-left: 30px;">Personal info</li>
<li>Shopping basket</li>
<li>Review order</li>
</ul>
<div class="section">
<div id="form">
<div class="inputContainer">
Username:
<input class="formInput" type="text" id="usernameInput" #usernameInput />
</div>
<div class="inputContainer">
Password:
<input class="formInput" type="password" id="passwordInput" #passwordInput />
</div>
</div>
<div id="hintWrapper">
<div id="hintSection" class="hint">
</div>
</div>
<div id="checkBoxWrapper">
<jqxCheckBox [theme]="'material'" #acceptCheckBox [width]="250" (onChange)="acceptCheckBoxChange($event)">
I accept the terms and conditions
</jqxCheckBox>
</div>
<div id="sectionButtonsWrapper">
<jqxButton [theme]="'material'" [width]="50" #nextButtonInfo class="nextButton">Next</jqxButton>
</div>
</div>
<div class="section">
<jqxListBox [theme]="'material'" #products
(onChange)="productsChange($event)"
(onUnselect)="productsUnselect($event)"
[width]="490"
[height]="150"
[multiple]="true"
[source]="source">
</jqxListBox>
<div class="hint" id="hintBasket">
</div>
<div id="basketButtonsWrapper">
<jqxButton [theme]="'material'" [width]="50" #backButtonBasket class="backButton">Back</jqxButton>
<jqxButton [theme]="'material'" [width]="50" #nextButtonBasket class="nextButton">Next</jqxButton>
</div>
</div>
<div class="section">
<div id="selectedProductsHeader">
<h4>Selected products</h4>
<div id="orderContainer" #orderContainer>
</div>
</div>
<div id="selectedProductsButtonsWrapper">
<jqxButton [theme]="'material'" [width]="50" #backButtonReview class="backButton">Back</jqxButton>
</div>
</div>
</jqxTabs>