Skip to content

Commit 40d224a

Browse files
NathanWalkerNathanWalker
committed
chore: docs tabs
1 parent 2c6979d commit 40d224a

39 files changed

+709
-73
lines changed

‎content/ui/action-bar.md

+26
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,39 @@ Views also part of the ActionBar abstraction:
2020
<img src="../assets/images/screenshots/android/ActionBar.png"/>
2121
</DeviceFrame>
2222

23+
<Tabs>
24+
<Tab flavor="typescript">
25+
2326
<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
27+
28+
</Tab>
29+
<Tab flavor="angular">
30+
2431
<<< @/../examples/angular/src/ui/ActionBar/component.html#example
32+
33+
</Tab>
34+
<Tab flavor="react">
35+
2536
<<< @/../examples/react/src/components/ui/actionbar.tsx#example
37+
38+
</Tab>
39+
<Tab flavor="solid">
40+
2641
<<< @/../examples/solid/src/ui/actionbar.tsx#example
42+
43+
</Tab>
44+
<Tab flavor="svelte">
45+
2746
<<< @/../examples/svelte/app/components/ui/ActionBar.svelte#example
47+
48+
</Tab>
49+
<Tab flavor="vue">
50+
2851
<<< @/../examples/vue/src/ui/Actionbar/component.vue#example
2952

53+
</Tab>
54+
</Tabs>
55+
3056
## Examples
3157

3258
### ActionBar with a custom title view

‎content/ui/activity-indicator.md

+6-13
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ contributors:
1515
<img src="../assets/images/screenshots/android/ActivityIndicator.png"/>
1616
</DeviceFrame>
1717

18+
## Examples
19+
20+
### Always busy ActivityIndicator
21+
1822
<Tabs>
1923
<Tab flavor="vue">
2024

@@ -25,11 +29,6 @@ contributors:
2529

2630
<<< @/../examples/typescript/src/ui/ActivityIndicator/template.xml#example
2731

28-
</Tab>
29-
<Tab flavor="javascript">
30-
31-
<<< @/../examples/typescript/src/ui/ActivityIndicator/template.xml#example
32-
3332
</Tab>
3433
<Tab flavor="angular">
3534

@@ -45,6 +44,8 @@ contributors:
4544

4645
<<< @/../examples/react/src/components/ui/activityindicator.tsx#example
4746

47+
</Tab>
48+
4849
</Tab>
4950
<Tab flavor="solid">
5051

@@ -53,14 +54,6 @@ contributors:
5354
</Tab>
5455
</Tabs>
5556

56-
## Examples
57-
58-
### Always busy ActivityIndicator
59-
60-
```xml
61-
<ActivityIndicator busy="true" />
62-
```
63-
6457
## Props
6558

6659
### busy

‎content/ui/button.md

+26
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,39 @@ For more information about the available gestures, see [Gestures](/guide/gesture
1717
<img src="../assets/images/screenshots/android/Button.png"/>
1818
</DeviceFrame>
1919

20+
<Tabs>
21+
<Tab flavor="typescript">
22+
2023
<<< @/../examples/typescript/src/ui/Button/template.xml#example
24+
25+
</Tab>
26+
<Tab flavor="angular">
27+
2128
<<< @/../examples/angular/src/ui/Button/component.html#example
29+
30+
</Tab>
31+
<Tab flavor="react">
32+
2233
<<< @/../examples/react/src/components/ui/button.tsx#example
34+
35+
</Tab>
36+
<Tab flavor="solid">
37+
2338
<<< @/../examples/solid/src/ui/button.tsx#example
39+
40+
</Tab>
41+
<Tab flavor="svelte">
42+
2443
<<< @/../examples/svelte/app/components/ui/Button.svelte#example
44+
45+
</Tab>
46+
<Tab flavor="vue">
47+
2548
<<< @/../examples/vue/src/ui/Button/component.vue#example
2649

50+
</Tab>
51+
</Tabs>
52+
2753
## Examples
2854

2955
### Formatting text inside a Button

‎content/ui/date-picker.md

+26
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,39 @@ See also: [TimePicker](/ui/time-picker).
1717
<img src="../assets/images/screenshots/android/DatePicker.png"/>
1818
</DeviceFrame>
1919

20+
<Tabs>
21+
<Tab flavor="typescript">
22+
2023
<<< @/../examples/typescript/src/ui/DatePicker/template.xml#example
24+
25+
</Tab>
26+
<Tab flavor="angular">
27+
2128
<<< @/../examples/angular/src/ui/DatePicker/component.html#example
29+
30+
</Tab>
31+
<Tab flavor="react">
32+
2233
<<< @/../examples/react/src/components/ui/datepicker.tsx#example
34+
35+
</Tab>
36+
<Tab flavor="solid">
37+
2338
<<< @/../examples/solid/src/ui/datepicker.tsx#example
39+
40+
</Tab>
41+
<Tab flavor="svelte">
42+
2443
<<< @/../examples/svelte/app/components/ui/DatePicker.svelte#example
44+
45+
</Tab>
46+
<Tab flavor="vue">
47+
2548
<<< @/../examples/vue/src/ui/DatePicker/component.vue#example
2649

50+
</Tab>
51+
</Tabs>
52+
2753
```xml
2854
<DatePicker
2955
year="2023"

‎content/ui/dialogs.md

+150-5
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,42 @@ See [DialogOptions](/api/interface/DialogOptions), [R.style](https://developer.a
4545
<img src="../assets/images/screenshots/android/Dialogs-Alert.png"/>
4646
</DeviceFrame>
4747

48+
<Tabs>
49+
<Tab flavor="typescript">
50+
4851
<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-alert
49-
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-alert
52+
53+
</Tab>
54+
<Tab flavor="angular">
55+
56+
::: code-group
57+
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-alert [HTML]
58+
<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-alert [TypeScript]
59+
:::
60+
61+
</Tab>
62+
<Tab flavor="react">
63+
5064
<<< @/../examples/react/src/components/ui/dialogs.tsx#example-alert
65+
66+
</Tab>
67+
<Tab flavor="solid">
68+
5169
<<< @/../examples/solid/src/ui/dialogs.tsx#example-alert
70+
71+
</Tab>
72+
<Tab flavor="svelte">
73+
5274
<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-alert
75+
76+
</Tab>
77+
<Tab flavor="vue">
78+
5379
<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-alert
5480

81+
</Tab>
82+
</Tabs>
83+
5584
A dialog for alerting the user.
5685

5786
See [alert()](/api/#alert).
@@ -65,13 +94,42 @@ See [alert()](/api/#alert).
6594
<img src="../assets/images/screenshots/android/Dialogs-Action.png"/>
6695
</DeviceFrame>
6796

97+
<Tabs>
98+
<Tab flavor="typescript">
99+
68100
<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-action
69-
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-action
101+
102+
</Tab>
103+
<Tab flavor="angular">
104+
105+
::: code-group
106+
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-action [HTML]
107+
<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-action [TypeScript]
108+
:::
109+
110+
</Tab>
111+
<Tab flavor="react">
112+
70113
<<< @/../examples/react/src/components/ui/dialogs.tsx#example-action
114+
115+
</Tab>
116+
<Tab flavor="solid">
117+
71118
<<< @/../examples/solid/src/ui/dialogs.tsx#example-action
119+
120+
</Tab>
121+
<Tab flavor="svelte">
122+
72123
<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-action
124+
125+
</Tab>
126+
<Tab flavor="vue">
127+
73128
<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-action
74129

130+
</Tab>
131+
</Tabs>
132+
75133
A dialog for prompting the user to choose.
76134

77135
**Note**: `destructiveActionsIndexes` allows setting some actions as destructive - shown in red. **iOS only.**
@@ -87,13 +145,42 @@ See [action()](/api/#action).
87145
<img src="../assets/images/screenshots/android/Dialogs-Confirm.png"/>
88146
</DeviceFrame>
89147

148+
<Tabs>
149+
<Tab flavor="typescript">
150+
90151
<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-confirm
91-
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-confirm
152+
153+
</Tab>
154+
<Tab flavor="angular">
155+
156+
::: code-group
157+
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-confirm [HTML]
158+
<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-confirm [TypeScript]
159+
:::
160+
161+
</Tab>
162+
<Tab flavor="react">
163+
92164
<<< @/../examples/react/src/components/ui/dialogs.tsx#example-confirm
165+
166+
</Tab>
167+
<Tab flavor="solid">
168+
93169
<<< @/../examples/solid/src/ui/dialogs.tsx#example-confirm
170+
171+
</Tab>
172+
<Tab flavor="svelte">
173+
94174
<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-confirm
175+
176+
</Tab>
177+
<Tab flavor="vue">
178+
95179
<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-confirm
96180

181+
</Tab>
182+
</Tabs>
183+
97184
A dialog for prompting the user to confirm.
98185

99186
See [confirm()](/api/#confirm).
@@ -107,13 +194,42 @@ See [confirm()](/api/#confirm).
107194
<img src="../assets/images/screenshots/android/Dialogs-Prompt.png"/>
108195
</DeviceFrame>
109196

197+
<Tabs>
198+
<Tab flavor="typescript">
199+
110200
<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-prompt
111-
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-prompt
201+
202+
</Tab>
203+
<Tab flavor="angular">
204+
205+
::: code-group
206+
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-prompt [HTML]
207+
<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-prompt [TypeScript]
208+
:::
209+
210+
</Tab>
211+
<Tab flavor="react">
212+
112213
<<< @/../examples/react/src/components/ui/dialogs.tsx#example-prompt
214+
215+
</Tab>
216+
<Tab flavor="solid">
217+
113218
<<< @/../examples/solid/src/ui/dialogs.tsx#example-prompt
219+
220+
</Tab>
221+
<Tab flavor="svelte">
222+
114223
<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-prompt
224+
225+
</Tab>
226+
<Tab flavor="vue">
227+
115228
<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-prompt
116229

230+
</Tab>
231+
</Tabs>
232+
117233
A dialog for prompting the user for input.
118234

119235
- `defaultText`: Sets the default text to display in the input box.
@@ -131,13 +247,42 @@ See [prompt()](/api/#prompt), [CoreTypes.AutocapitalizationType](/api/namespace/
131247
<img src="../assets/images/screenshots/android/Dialogs-Login.png"/>
132248
</DeviceFrame>
133249

250+
<Tabs>
251+
<Tab flavor="typescript">
252+
134253
<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-login
135-
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-login
254+
255+
</Tab>
256+
<Tab flavor="angular">
257+
258+
::: code-group
259+
<<< @/../examples/angular/src/ui/Dialogs/component.html#example-login [HTML]
260+
<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-login [TypeScript]
261+
:::
262+
263+
</Tab>
264+
<Tab flavor="react">
265+
136266
<<< @/../examples/react/src/components/ui/dialogs.tsx#example-login
267+
268+
</Tab>
269+
<Tab flavor="solid">
270+
137271
<<< @/../examples/solid/src/ui/dialogs.tsx#example-login
272+
273+
</Tab>
274+
<Tab flavor="svelte">
275+
138276
<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-login
277+
278+
</Tab>
279+
<Tab flavor="vue">
280+
139281
<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-login
140282

283+
</Tab>
284+
</Tabs>
285+
141286
A dialog for prompting the user for credentials.
142287

143288
See [login()](/api/#login).

0 commit comments

Comments
 (0)