Skip to content

Commit f2eb4c7

Browse files
sean-perkinssean-perkins
authored
docs(item): migrate inputs example to v7 (#2835)
1 parent 29a1279 commit f2eb4c7

File tree

5 files changed

+94
-103
lines changed

5 files changed

+94
-103
lines changed

Diff for: ‎static/usage/v7/item/inputs/angular.md

+12-20
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,30 @@
11
```html
22
<ion-item>
3-
<ion-label>Default Input</ion-label>
4-
<ion-input placeholder="Enter text"></ion-input>
3+
<ion-input label="Default Input" placeholder="Enter text"></ion-input>
54
</ion-item>
65

76
<ion-item>
8-
<ion-label position="fixed">Fixed Input</ion-label>
9-
<ion-input placeholder="Enter text"></ion-input>
7+
<ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
108
</ion-item>
119

1210
<ion-item>
13-
<ion-label position="stacked">Stacked Input</ion-label>
14-
<ion-input placeholder="Enter text"></ion-input>
11+
<ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
1512
</ion-item>
1613

1714
<ion-item>
18-
<ion-label position="floating">Floating Input</ion-label>
19-
<ion-input placeholder="Enter text"></ion-input>
15+
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
2016
</ion-item>
2117

2218
<ion-item fill="outline">
23-
<ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
24-
<ion-input placeholder="Enter text"></ion-input>
19+
<ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
2520
</ion-item>
2621

2722
<ion-item fill="solid">
28-
<ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
29-
<ion-input placeholder="Enter text"></ion-input>
23+
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
3024
</ion-item>
3125

3226
<ion-item>
33-
<ion-label>Select</ion-label>
34-
<ion-select placeholder="Make a Selection">
27+
<ion-select label="Select" placeholder="Make a Selection">
3528
<ion-select-option value="">No Game Console</ion-select-option>
3629
<ion-select-option value="nes">NES</ion-select-option>
3730
<ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -43,17 +36,16 @@
4336
</ion-item>
4437

4538
<ion-item>
46-
<ion-label>Toggle</ion-label>
47-
<ion-toggle slot="end"></ion-toggle>
39+
<ion-toggle> Toggle </ion-toggle>
4840
</ion-item>
4941

5042
<ion-item>
51-
<ion-label>Checkbox</ion-label>
52-
<ion-checkbox slot="end"></ion-checkbox>
43+
<ion-checkbox> Checkbox </ion-checkbox>
5344
</ion-item>
5445

5546
<ion-item>
56-
<ion-label position="stacked">Range</ion-label>
57-
<ion-range></ion-range>
47+
<ion-range label-placement="start">
48+
<div slot="label">Range</div>
49+
</ion-range>
5850
</ion-item>
5951
```

Diff for: ‎static/usage/v7/item/inputs/demo.html

+19-21
Original file line numberDiff line numberDiff line change
@@ -22,41 +22,36 @@
2222
<ion-content>
2323
<div class="container">
2424
<ion-item>
25-
<ion-label>Default Input</ion-label>
26-
<ion-input placeholder="Enter text"></ion-input>
25+
<ion-input label="Default Input" placeholder="Enter text"></ion-input>
2726
</ion-item>
2827

2928
<ion-item>
30-
<ion-label position="fixed">Fixed Input</ion-label>
31-
<ion-input placeholder="Enter text"></ion-input>
29+
<ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
3230
</ion-item>
3331

3432
<ion-item>
35-
<ion-label position="stacked">Stacked Input</ion-label>
36-
<ion-input placeholder="Enter text"></ion-input>
33+
<ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
3734
</ion-item>
3835

3936
<ion-item>
40-
<ion-label position="floating">Floating Input</ion-label>
41-
<ion-input placeholder="Enter text"></ion-input>
37+
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
4238
</ion-item>
4339

4440
<ion-item fill="outline">
45-
<ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
46-
<ion-input placeholder="Enter text"></ion-input>
41+
<ion-input label="Floating Input: Outline (MD only)" label-placement="floating"
42+
placeholder="Enter text"></ion-input>
4743
</ion-item>
4844

4945
<ion-item fill="solid">
50-
<ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
51-
<ion-input placeholder="Enter text"></ion-input>
46+
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating"
47+
placeholder="Enter text"></ion-input>
5248
</ion-item>
5349

5450
<ion-item>
55-
<ion-label>Select</ion-label>
56-
<ion-select placeholder="Make a Selection">
51+
<ion-select label="Select" placeholder="Make a Selection">
5752
<ion-select-option value="">No Game Console</ion-select-option>
5853
<ion-select-option value="nes">NES</ion-select-option>
59-
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
54+
<ion-select-option value="n64">Nintendo64</ion-select-option>
6055
<ion-select-option value="ps">PlayStation</ion-select-option>
6156
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
6257
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
@@ -65,18 +60,21 @@
6560
</ion-item>
6661

6762
<ion-item>
68-
<ion-label>Toggle</ion-label>
69-
<ion-toggle slot="end"></ion-toggle>
63+
<ion-toggle>
64+
Toggle
65+
</ion-toggle>
7066
</ion-item>
7167

7268
<ion-item>
73-
<ion-label>Checkbox</ion-label>
74-
<ion-checkbox slot="end"></ion-checkbox>
69+
<ion-checkbox>
70+
Checkbox
71+
</ion-checkbox>
7572
</ion-item>
7673

7774
<ion-item>
78-
<ion-label position="stacked">Range</ion-label>
79-
<ion-range></ion-range>
75+
<ion-range label-placement="start">
76+
<div slot="label">Range</div>
77+
</ion-range>
8078
</ion-item>
8179
</div>
8280
</ion-content>

Diff for: ‎static/usage/v7/item/inputs/javascript.md

+16-20
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,30 @@
11
```html
22
<ion-item>
3-
<ion-label>Default Input</ion-label>
4-
<ion-input placeholder="Enter text"></ion-input>
3+
<ion-input label="Default Input" placeholder="Enter text"></ion-input>
54
</ion-item>
65

76
<ion-item>
8-
<ion-label position="fixed">Fixed Input</ion-label>
9-
<ion-input placeholder="Enter text"></ion-input>
7+
<ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
108
</ion-item>
119

1210
<ion-item>
13-
<ion-label position="stacked">Stacked Input</ion-label>
14-
<ion-input placeholder="Enter text"></ion-input>
11+
<ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
1512
</ion-item>
1613

1714
<ion-item>
18-
<ion-label position="floating">Floating Input</ion-label>
19-
<ion-input placeholder="Enter text"></ion-input>
15+
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
2016
</ion-item>
2117

2218
<ion-item fill="outline">
23-
<ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
24-
<ion-input placeholder="Enter text"></ion-input>
19+
<ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
2520
</ion-item>
2621

2722
<ion-item fill="solid">
28-
<ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
29-
<ion-input placeholder="Enter text"></ion-input>
23+
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
3024
</ion-item>
3125

3226
<ion-item>
33-
<ion-label>Select</ion-label>
34-
<ion-select placeholder="Make a Selection">
27+
<ion-select label="Select" placeholder="Make a Selection">
3528
<ion-select-option value="">No Game Console</ion-select-option>
3629
<ion-select-option value="nes">NES</ion-select-option>
3730
<ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -43,17 +36,20 @@
4336
</ion-item>
4437

4538
<ion-item>
46-
<ion-label>Toggle</ion-label>
47-
<ion-toggle slot="end"></ion-toggle>
39+
<ion-toggle>
40+
<div>Toggle</div>
41+
</ion-toggle>
4842
</ion-item>
4943

5044
<ion-item>
51-
<ion-label>Checkbox</ion-label>
52-
<ion-checkbox slot="end"></ion-checkbox>
45+
<ion-checkbox>
46+
<div>Checkbox</div>
47+
</ion-checkbox>
5348
</ion-item>
5449

5550
<ion-item>
56-
<ion-label position="stacked">Range</ion-label>
57-
<ion-range></ion-range>
51+
<ion-range label-placement="start">
52+
<div slot="label">Range</div>
53+
</ion-range>
5854
</ion-item>
5955
```

Diff for: ‎static/usage/v7/item/inputs/react.md

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,44 @@
11
```tsx
22
import React from 'react';
3-
import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
3+
import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
44

55
function Example() {
66
return (
77
<>
88
<IonItem>
9-
<IonLabel>Default Input</IonLabel>
10-
<IonInput placeholder="Enter text"></IonInput>
9+
<IonInput label="Default Input" placeholder="Enter text"></IonInput>
1110
</IonItem>
1211

1312
<IonItem>
14-
<IonLabel position="fixed">Fixed Input</IonLabel>
15-
<IonInput placeholder="Enter text"></IonInput>
13+
<IonInput label="Fixed Input" label-placement="fixed" placeholder="Enter text"></IonInput>
1614
</IonItem>
1715

1816
<IonItem>
19-
<IonLabel position="stacked">Stacked Input</IonLabel>
20-
<IonInput placeholder="Enter text"></IonInput>
17+
<IonInput label="Stacked Input" label-placement="stacked" placeholder="Enter text"></IonInput>
2118
</IonItem>
2219

2320
<IonItem>
24-
<IonLabel position="floating">Floating Input</IonLabel>
25-
<IonInput placeholder="Enter text"></IonInput>
21+
<IonInput label="Floating Input" label-placement="floating" placeholder="Enter text"></IonInput>
2622
</IonItem>
2723

2824
<IonItem fill="outline">
29-
<IonLabel position="floating">Floating Input: Outline (MD only)</IonLabel>
30-
<IonInput placeholder="Enter text"></IonInput>
25+
<IonInput
26+
label="Floating Input: Outline (MD only)"
27+
label-placement="floating"
28+
placeholder="Enter text"
29+
></IonInput>
3130
</IonItem>
3231

3332
<IonItem fill="solid">
34-
<IonLabel position="floating">Floating Input: Solid (MD only)</IonLabel>
35-
<IonInput placeholder="Enter text"></IonInput>
33+
<IonInput
34+
label="Floating Input: Solid (MD only)"
35+
label-placement="floating"
36+
placeholder="Enter text"
37+
></IonInput>
3638
</IonItem>
3739

3840
<IonItem>
39-
<IonLabel>Select</IonLabel>
40-
<IonSelect placeholder="Make a Selection">
41+
<IonSelect label="Select" placeholder="Make a Selection">
4142
<IonSelectOption value="">No Game Console</IonSelectOption>
4243
<IonSelectOption value="nes">NES</IonSelectOption>
4344
<IonSelectOption value="n64">Nintendo64</IonSelectOption>
@@ -49,18 +50,17 @@ function Example() {
4950
</IonItem>
5051

5152
<IonItem>
52-
<IonLabel>Toggle</IonLabel>
53-
<IonToggle slot="end"></IonToggle>
53+
<IonToggle>Toggle</IonToggle>
5454
</IonItem>
5555

5656
<IonItem>
57-
<IonLabel>Checkbox</IonLabel>
58-
<IonCheckbox slot="end"></IonCheckbox>
57+
<IonCheckbox>Checkbox</IonCheckbox>
5958
</IonItem>
6059

6160
<IonItem>
62-
<IonLabel position="stacked">Range</IonLabel>
63-
<IonRange></IonRange>
61+
<IonRange label-placement="start">
62+
<div slot="label">Range</div>
63+
</IonRange>
6464
</IonItem>
6565
</>
6666
);

Diff for: ‎static/usage/v7/item/inputs/vue.md

+26-21
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
11
```html
22
<template>
33
<ion-item>
4-
<ion-label>Default Input</ion-label>
5-
<ion-input placeholder="Enter text"></ion-input>
4+
<ion-input label="Default Input" placeholder="Enter text"></ion-input>
65
</ion-item>
76

87
<ion-item>
9-
<ion-label position="fixed">Fixed Input</ion-label>
10-
<ion-input placeholder="Enter text"></ion-input>
8+
<ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
119
</ion-item>
1210

1311
<ion-item>
14-
<ion-label position="stacked">Stacked Input</ion-label>
15-
<ion-input placeholder="Enter text"></ion-input>
12+
<ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
1613
</ion-item>
1714

1815
<ion-item>
19-
<ion-label position="floating">Floating Input</ion-label>
20-
<ion-input placeholder="Enter text"></ion-input>
16+
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
2117
</ion-item>
2218

2319
<ion-item fill="outline">
24-
<ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
25-
<ion-input placeholder="Enter text"></ion-input>
20+
<ion-input
21+
label="Floating Input: Outline (MD only)"
22+
label-placement="floating"
23+
placeholder="Enter text"
24+
></ion-input>
2625
</ion-item>
2726

2827
<ion-item fill="solid">
29-
<ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
30-
<ion-input placeholder="Enter text"></ion-input>
28+
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
3129
</ion-item>
3230

3331
<ion-item>
34-
<ion-label>Select</ion-label>
35-
<ion-select placeholder="Make a Selection">
32+
<ion-select label="Select" placeholder="Make a Selection">
3633
<ion-select-option value="">No Game Console</ion-select-option>
3734
<ion-select-option value="nes">NES</ion-select-option>
3835
<ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -44,23 +41,31 @@
4441
</ion-item>
4542

4643
<ion-item>
47-
<ion-label>Toggle</ion-label>
48-
<ion-toggle slot="end"></ion-toggle>
44+
<ion-toggle> Toggle </ion-toggle>
4945
</ion-item>
5046

5147
<ion-item>
52-
<ion-label>Checkbox</ion-label>
53-
<ion-checkbox slot="end"></ion-checkbox>
48+
<ion-checkbox> Checkbox </ion-checkbox>
5449
</ion-item>
5550

5651
<ion-item>
57-
<ion-label position="stacked">Range</ion-label>
58-
<ion-range></ion-range>
52+
<ion-range label-placement="start">
53+
<div slot="label">Range</div>
54+
</ion-range>
5955
</ion-item>
6056
</template>
6157

6258
<script lang="ts">
63-
import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/vue';
59+
import {
60+
IonCheckbox,
61+
IonInput,
62+
IonItem,
63+
IonLabel,
64+
IonRange,
65+
IonSelect,
66+
IonSelectOption,
67+
IonToggle,
68+
} from '@ionic/vue';
6469
import { defineComponent } from 'vue';
6570
6671
export default defineComponent({

0 commit comments

Comments
 (0)