Skip to content

Commit 54a3cb2

Browse files
brandyscarneybrandyscarney
authored
docs(playgrounds): add back migration examples for JP docs (#4225)
Co-authored-by: Brandy Smith <[email protected]>
1 parent c9f4754 commit 54a3cb2

File tree

7 files changed

+1456
-0
lines changed

7 files changed

+1456
-0
lines changed

‎static/usage/v8/checkbox/migration/index.md

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
3+
4+
````mdx-code-block
5+
<Tabs
6+
groupId="framework"
7+
defaultValue="javascript"
8+
values={[
9+
{ value: 'javascript', label: 'JavaScript' },
10+
{ value: 'angular', label: 'Angular' },
11+
{ value: 'react', label: 'React' },
12+
{ value: 'vue', label: 'Vue' },
13+
]
14+
}>
15+
<TabItem value="javascript">
16+
17+
```html
18+
<!-- Basic -->
19+
20+
<!-- Before -->
21+
<ion-item>
22+
<ion-label>Checkbox Label</ion-label>
23+
<ion-checkbox></ion-checkbox>
24+
</ion-item>
25+
26+
<!-- After -->
27+
<ion-item>
28+
<ion-checkbox>Checkbox Label</ion-checkbox>
29+
</ion-item>
30+
31+
<!-- Fixed Labels -->
32+
33+
<!-- Before -->
34+
<ion-item>
35+
<ion-label position="fixed">Checkbox Label</ion-label>
36+
<ion-checkbox></ion-checkbox>
37+
</ion-item>
38+
39+
<!-- After -->
40+
<ion-item>
41+
<ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
42+
</ion-item>
43+
44+
<!-- Checkbox at the start of line, Label at the end of line -->
45+
46+
<!-- Before -->
47+
<ion-item>
48+
<ion-label slot="end">Checkbox Label</ion-label>
49+
<ion-checkbox></ion-checkbox>
50+
</ion-item>
51+
52+
<!-- After -->
53+
<ion-item>
54+
<ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
55+
</ion-item>
56+
```
57+
</TabItem>
58+
<TabItem value="angular">
59+
60+
```html
61+
<!-- Basic -->
62+
63+
<!-- Before -->
64+
<ion-item>
65+
<ion-label>Checkbox Label</ion-label>
66+
<ion-checkbox></ion-checkbox>
67+
</ion-item>
68+
69+
<!-- After -->
70+
<ion-item>
71+
<ion-checkbox>Checkbox Label</ion-checkbox>
72+
</ion-item>
73+
74+
<!-- Fixed Labels -->
75+
76+
<!-- Before -->
77+
<ion-item>
78+
<ion-label position="fixed">Checkbox Label</ion-label>
79+
<ion-checkbox></ion-checkbox>
80+
</ion-item>
81+
82+
<!-- After -->
83+
<ion-item>
84+
<ion-checkbox labelPlacement="fixed">Checkbox Label</ion-checkbox>
85+
</ion-item>
86+
87+
<!-- Checkbox at the start of line, Label at the end of line -->
88+
89+
<!-- Before -->
90+
<ion-item>
91+
<ion-label slot="end">Checkbox Label</ion-label>
92+
<ion-checkbox></ion-checkbox>
93+
</ion-item>
94+
95+
<!-- After -->
96+
<ion-item>
97+
<ion-checkbox labelPlacement="end">Checkbox Label</ion-checkbox>
98+
</ion-item>
99+
```
100+
</TabItem>
101+
<TabItem value="react">
102+
103+
```tsx
104+
{/* Basic */}
105+
106+
{/* Before */}
107+
<IonItem>
108+
<IonLabel>Checkbox Label</IonLabel>
109+
<IonCheckbox></IonCheckbox>
110+
</IonItem>
111+
112+
{/* After */}
113+
<IonItem>
114+
<IonCheckbox>Checkbox Label</IonCheckbox>
115+
</IonItem>
116+
117+
{/* Fixed Labels */}
118+
119+
{/* Before */}
120+
<IonItem>
121+
<IonLabel position="fixed">Checkbox Label</IonLabel>
122+
<IonCheckbox></IonCheckbox>
123+
</IonItem>
124+
125+
{/* After */}
126+
<IonItem>
127+
<IonCheckbox labelPlacement="fixed">Checkbox Label</IonCheckbox>
128+
</IonItem>
129+
130+
{/* Checkbox at the start of line, Label at the end of line */}
131+
132+
{/* Before */}
133+
<IonItem>
134+
<IonLabel slot="end">Checkbox Label</IonLabel>
135+
<IonCheckbox></IonCheckbox>
136+
</IonItem>
137+
138+
{/* After */}
139+
<IonItem>
140+
<IonCheckbox labelPlacement="end">Checkbox Label</IonCheckbox>
141+
</IonItem>
142+
```
143+
</TabItem>
144+
<TabItem value="vue">
145+
146+
```html
147+
<!-- Basic -->
148+
149+
<!-- Before -->
150+
<ion-item>
151+
<ion-label>Checkbox Label</ion-label>
152+
<ion-checkbox></ion-checkbox>
153+
</ion-item>
154+
155+
<!-- After -->
156+
<ion-item>
157+
<ion-checkbox>Checkbox Label</ion-checkbox>
158+
</ion-item>
159+
160+
<!-- Fixed Labels -->
161+
162+
<!-- Before -->
163+
<ion-item>
164+
<ion-label position="fixed">Checkbox Label</ion-label>
165+
<ion-checkbox></ion-checkbox>
166+
</ion-item>
167+
168+
<!-- After -->
169+
<ion-item>
170+
<ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
171+
</ion-item>
172+
173+
<!-- Checkbox at the start of line, Label at the end of line -->
174+
175+
<!-- Before -->
176+
<ion-item>
177+
<ion-label slot="end">Checkbox Label</ion-label>
178+
<ion-checkbox></ion-checkbox>
179+
</ion-item>
180+
181+
<!-- After -->
182+
<ion-item>
183+
<ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
184+
</ion-item>
185+
```
186+
</TabItem>
187+
</Tabs>
188+
````

0 commit comments

Comments
 (0)