-
Notifications
You must be signed in to change notification settings - Fork 471
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(demo): Remove
tui-form classes from demo (#9990)
Co-authored-by: Alex Inkin <[email protected]>
- Loading branch information
Showing
15 changed files
with
482 additions
and
480 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
315 changes: 315 additions & 0 deletions
315
projects/demo/src/modules/components/form/examples/2/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,315 @@ | ||
| <div class="tui-container"> | ||
| <div class="stepper"> | ||
| <tui-stepper [activeItemIndex]="0"> | ||
| <button | ||
| tuiStep | ||
| type="button" | ||
| > | ||
| First step | ||
| </button> | ||
| <button | ||
| tuiStep | ||
| type="button" | ||
| [disabled]="true" | ||
| > | ||
| Second step | ||
| </button> | ||
| <button | ||
| tuiStep | ||
| type="button" | ||
| [disabled]="true" | ||
| > | ||
| Third step | ||
| </button> | ||
| <button | ||
| tuiStep | ||
| type="button" | ||
| [disabled]="true" | ||
| > | ||
| Fourth step | ||
| </button> | ||
| </tui-stepper> | ||
| </div> | ||
|
|
||
| <form | ||
| tuiForm="l" | ||
| class="example2-form" | ||
| [formGroup]="testForm" | ||
| [style.max-width.rem]="45" | ||
| > | ||
| <header tuiHeader> | ||
| <h3 tuiTitle>A header</h3> | ||
| </header> | ||
|
|
||
| <tui-input | ||
| formControlName="nameValue" | ||
| tuiHintContent="A tooltip" | ||
| > | ||
| Textfield | ||
| <input | ||
| placeholder="Field placeholder" | ||
| tuiTextfieldLegacy | ||
| /> | ||
| <span class="tui-required"></span> | ||
| </tui-input> | ||
| <tui-error | ||
| formControlName="nameValue" | ||
| [error]="[] | tuiFieldError | async" | ||
| /> | ||
|
|
||
| <tui-input-date formControlName="periodValue"> | ||
| Input date | ||
| <input | ||
| placeholder="Placeholder" | ||
| tuiTextfieldLegacy | ||
| /> | ||
| <span class="tui-required"></span> | ||
| </tui-input-date> | ||
| <tui-error | ||
| formControlName="periodValue" | ||
| [error]="[] | tuiFieldError | async" | ||
| /> | ||
| <div class="multi-fields"> | ||
| <div class="multi-field"> | ||
| <tui-input-password formControlName="passwordValue">Input password</tui-input-password> | ||
| <tui-error | ||
| formControlName="passwordValue" | ||
| class="tui-space-top-none" | ||
| [error]="[] | tuiFieldError | async" | ||
| /> | ||
| </div> | ||
| <div class="multi-field"> | ||
| <tui-input-number | ||
| formControlName="moneyValue" | ||
| [tuiTextfieldPostfix]="'RUB' | tuiCurrency" | ||
| > | ||
| Input money | ||
| </tui-input-number> | ||
| <tui-error | ||
| formControlName="moneyValue" | ||
| class="tui-space-top-none" | ||
| [error]="[] | tuiFieldError | async" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="slider"> | ||
| <tui-input-slider | ||
| formControlName="quantityValue" | ||
| tuiTextfieldPostfix="₽" | ||
| [max]="3000000" | ||
| [min]="50000" | ||
| [segments]="1" | ||
| > | ||
| Some slider | ||
| </tui-input-slider> | ||
| <div class="ticks-labels"> | ||
| <span>from 50 000 ₽</span> | ||
| <span>to 3 000 000 ₽</span> | ||
| </div> | ||
| <div class="field-note">Some additional text</div> | ||
| <tui-error | ||
| formControlName="quantityValue" | ||
| [error]="[] | tuiFieldError | async" | ||
| /> | ||
| </div> | ||
| <div class="multi-fields tui-space_top-5"> | ||
| <div class="multi-field"> | ||
| <tui-select | ||
| formControlName="personValue" | ||
| [valueContent]="personValueContent" | ||
| > | ||
| Choose a person | ||
| <tui-data-list-wrapper | ||
| *tuiDataList | ||
| [items]="persons" | ||
| /> | ||
| </tui-select> | ||
| <ng-template | ||
| #personValueContent | ||
| let-data | ||
| > | ||
| <div class="uppercase-name">{{ data.firstName }} {{ data.lastName }}</div> | ||
| </ng-template> | ||
| <tui-error | ||
| formControlName="personValue" | ||
| class="tui-space-top-none" | ||
| [error]="[] | tuiFieldError | async" | ||
| /> | ||
| </div> | ||
| <div class="multi-field"> | ||
| <tui-input-phone formControlName="phoneValue">Input phone</tui-input-phone> | ||
| <tui-error | ||
| formControlName="phoneValue" | ||
| class="tui-space-top-none" | ||
| [error]="[] | tuiFieldError | async" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <header tuiHeader> | ||
| <h3 tuiTitle>Header</h3> | ||
| </header> | ||
| <div | ||
| tuiGroup | ||
| [collapsed]="true" | ||
| > | ||
| <label tuiBlock> | ||
| One option | ||
| <input | ||
| formControlName="radioValue" | ||
| tuiRadio | ||
| type="radio" | ||
| value="with-commission" | ||
| [style.margin-left]="'auto'" | ||
| /> | ||
| </label> | ||
| <label tuiBlock> | ||
| An alternative one | ||
| <input | ||
| formControlName="radioValue" | ||
| tuiRadio | ||
| type="radio" | ||
| value="without-commission" | ||
| [style.margin-left]="'auto'" | ||
| /> | ||
| </label> | ||
| </div> | ||
| <div class="half-width"> | ||
| <tui-input-time formControlName="timeValue">Input time</tui-input-time> | ||
| </div> | ||
| <div class="checkboxes"> | ||
| <label | ||
| tuiLabel | ||
| class="checkbox" | ||
| > | ||
| <input | ||
| formControlName="osnoValue" | ||
| tuiCheckbox | ||
| type="checkbox" | ||
| /> | ||
| First option | ||
| </label> | ||
| <label | ||
| tuiLabel | ||
| class="checkbox" | ||
| > | ||
| <input | ||
| formControlName="usnValue" | ||
| tuiCheckbox | ||
| type="checkbox" | ||
| /> | ||
| Cool option | ||
| </label> | ||
| <label | ||
| tuiLabel | ||
| class="checkbox" | ||
| > | ||
| <input | ||
| formControlName="eshnValue" | ||
| tuiCheckbox | ||
| type="checkbox" | ||
| /> | ||
| Boring option | ||
| </label> | ||
| <label | ||
| tuiLabel | ||
| class="checkbox" | ||
| > | ||
| <input | ||
| formControlName="envdValue" | ||
| tuiCheckbox | ||
| type="checkbox" | ||
| /> | ||
| Interesting option | ||
| </label> | ||
| </div> | ||
| <header tuiHeader> | ||
| <h3 tuiTitle>Header</h3> | ||
| </header> | ||
| <label class="text-normal"> | ||
| From | ||
| <tui-select | ||
| formControlName="accountWherefrom" | ||
| class="accounts-select" | ||
| [tuiTextfieldLabelOutside]="true" | ||
| [valueContent]="accountContent" | ||
| > | ||
| Choose an account | ||
| <tui-data-list-wrapper | ||
| *tuiDataList | ||
| [itemContent]="accountContent" | ||
| [items]="accounts" | ||
| /> | ||
| </tui-select> | ||
| </label> | ||
| <label class="text-normal"> | ||
| To | ||
| <tui-select | ||
| formControlName="accountWhere" | ||
| class="accounts-select" | ||
| [tuiTextfieldLabelOutside]="true" | ||
| [valueContent]="accountContent" | ||
| > | ||
| Choose an account | ||
| <tui-data-list-wrapper | ||
| *tuiDataList | ||
| [itemContent]="accountContent" | ||
| [items]="accounts" | ||
| /> | ||
| </tui-select> | ||
| </label> | ||
| <header tuiHeader> | ||
| <h3 tuiTitle>Header</h3> | ||
| </header> | ||
| <div class="select-with-checkbox"> | ||
| <tui-input | ||
| formControlName="textValue" | ||
| tuiHintContent="A tooltip" | ||
| > | ||
| Textfield | ||
| <input | ||
| placeholder="Placeholder" | ||
| tuiTextfieldLegacy | ||
| /> | ||
| </tui-input> | ||
| <label | ||
| tuiLabel | ||
| class="tui-space_top-2" | ||
| > | ||
| <input | ||
| formControlName="checkboxValue" | ||
| tuiCheckbox | ||
| type="checkbox" | ||
| /> | ||
| Try this | ||
| </label> | ||
| </div> | ||
| <div class="buttons"> | ||
| <button | ||
| size="l" | ||
| tuiButton | ||
| type="submit" | ||
| class="" | ||
| > | ||
| Submit | ||
| </button> | ||
| <button | ||
| appearance="flat" | ||
| size="l" | ||
| tuiButton | ||
| type="button" | ||
| class="" | ||
| > | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| <ng-template | ||
| #accountContent | ||
| let-account | ||
| > | ||
| <span class="account"> | ||
| {{ account.name }} | ||
| <span>{{ account.amount | tuiAmount: 'RUB' | async }}</span> | ||
| </span> | ||
| </ng-template> | ||
| </form> | ||
| </div> |
Oops, something went wrong.