ionic/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html at b941de95bf0f458bc9706d688f2bd734c91f4d6d · KillerCodeMonkey/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<ion-header>
  <ion-toolbar>
    <ion-title>
      Inputs test
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <p>Change Detections: <span id="counter">{{counter()}}</span></p>
  <ion-list>

    <ion-item>
      <ion-label>DateTime</ion-label>
      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
      <ion-note slot="end" id="datetime-note">{{datetime}}</ion-note>
    </ion-item>

    <ion-item color="dark">
      <ion-label>DateTime Mirror</ion-label>
      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
      <ion-note slot="end">{{datetime}}</ion-note>
    </ion-item>

    <ion-item>
      <ion-select label="Select" [(ngModel)]="select" id="game-console" [disabled]="isDisabled">
        <ion-select-option value="">No Game Console</ion-select-option>
        <ion-select-option value="nes">NES</ion-select-option>
        <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
        <ion-select-option value="ps">PlayStation</ion-select-option>
        <ion-select-option value="genesis">Sega Genesis</ion-select-option>
        <ion-select-option value="saturn">Sega Saturn</ion-select-option>
        <ion-select-option value="snes">SNES</ion-select-option>
      </ion-select>
      <ion-note slot="end" id="select-note">{{select}}</ion-note>
    </ion-item>

    <ion-item color="dark">
      <ion-select label="Select Mirror" [(ngModel)]="select">
        <ion-select-option value="">No Game Console</ion-select-option>
        <ion-select-option value="nes">NES</ion-select-option>
        <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
        <ion-select-option value="ps">PlayStation</ion-select-option>
        <ion-select-option value="genesis">Sega Genesis</ion-select-option>
        <ion-select-option value="saturn">Sega Saturn</ion-select-option>
        <ion-select-option value="snes">SNES</ion-select-option>
      </ion-select>
      <ion-note slot="end">{{select}}</ion-note>
    </ion-item>

    <ion-item>
      <ion-toggle [(ngModel)]="toggle" slot="end" [disabled]="isDisabled">
        Toggle
      </ion-toggle>
      <ion-note slot="end" id="toggle-note">{{toggle}}</ion-note>
    </ion-item>

    <ion-item color="dark">
      <ion-toggle [(ngModel)]="toggle" slot="end">
        Toggle Mirror
      </ion-toggle>
      <ion-note slot="end">{{toggle}}</ion-note>
    </ion-item>

    <ion-item>
      <ion-input label="Input" [(ngModel)]="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
      <ion-note slot="end" id="input-note">{{input}}</ion-note>
    </ion-item>

    <ion-item color="dark">
      <ion-input label="Input Mirror" [(ngModel)]="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
      <ion-note slot="end">{{input}}</ion-note>
    </ion-item>

    <ion-item>
      <ion-input-otp [(ngModel)]="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP</ion-input-otp>
      <ion-note slot="end" id="input-otp-note">{{inputOtp}}</ion-note>
    </ion-item>

    <ion-item color="dark">
      <ion-input-otp [(ngModel)]="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP Mirror</ion-input-otp>
      <ion-note slot="end">{{inputOtp}}</ion-note>
    </ion-item>

    <ion-item>
      <ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox" [disabled]="isDisabled">
        Checkbox
      </ion-checkbox>
      <ion-note slot="end" id="checkbox-note">{{checkbox}}</ion-note>
    </ion-item>

    <ion-item color="dark">
      <ion-checkbox [(ngModel)]="checkbox" slot="start">
        Checkbox Mirror
      </ion-checkbox>
      <ion-note slot="end">{{checkbox}}</ion-note>
    </ion-item>

    <ion-item>
      <ion-radio-group value="nes" [(ngModel)]="radio" id="first-radio">
        <ion-radio value="nes" [disabled]="isDisabled">Radio</ion-radio>
      </ion-radio-group>
      <ion-note slot="end" id="radio-note">{{radio}}</ion-note>
    </ion-item>

    <ion-item color="dark">
      <ion-radio-group value="nes" [(ngModel)]="radio">
        <ion-radio value="nes">Radio Mirror</ion-radio>
      </ion-radio-group>
      <ion-note slot="end">{{radio}}</ion-note>
    </ion-item>

    <ion-item>
      <ion-range [(ngModel)]="range" min="0" max="100" id="first-range" [disabled]="isDisabled">
        <ion-label slot="start">Range</ion-label>
      </ion-range>
    </ion-item>

    <ion-item>
      <ion-textarea [(ngModel)]="textarea" minLength="0" maxLength="100" [disabled]="isDisabled" [readonly]="isReadonly" label="Textarea"></ion-textarea>
    </ion-item>

  </ion-list>
  <p>
    <ion-button (click)="setValues()" id="set-button">Set values</ion-button>
    <ion-button (click)="resetValues()" id="reset-button">Reset values</ion-button>
    <ion-button (click)="toggleDisable()" id="disable-button">Toggle Disabled</ion-button>
    <ion-button (click)="toggleReadonly()" id="readonly-button">Toggle Readonly</ion-button>
  </p>
</ion-content>