Skip to content

Commit e002356

Browse files
ltmltm
committed
Replace docs-tabs with Tabs
1 parent 22e824f commit e002356

File tree

6 files changed

+368
-198
lines changed

6 files changed

+368
-198
lines changed

‎docs/developing/hardware-back-button.md

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
---
22
---
3+
import Tabs from '@theme/Tabs';
4+
import TabItem from '@theme/TabItem';
35

46
# Hardware Back Button
57

@@ -25,8 +27,16 @@ For complete hardware back button support, we recommend using Capacitor or Cordo
2527
2628
## Basic Usage
2729

28-
<docs-tabs>
29-
<docs-tab tab="javascript">
30+
<Tabs
31+
defaultValue="javascript"
32+
values={[
33+
{ value: 'javascript', label: 'JavaScript' },
34+
{ value: 'angular', label: 'Angular' },
35+
{ value: 'react', label: 'React' },
36+
{ value: 'vue', label: 'Vue' },
37+
]
38+
}>
39+
<TabItem value="javascript">
3040

3141
```javascript
3242
document.addEventListener('ionBackButton', (ev) => {
@@ -36,8 +46,8 @@ document.addEventListener('ionBackButton', (ev) => {
3646
});
3747

3848
```
39-
</docs-tab>
40-
<docs-tab tab="angular">
49+
</TabItem>
50+
<TabItem value="angular">
4151

4252
```typescript
4353
import { Platform } from '@ionic/angular';
@@ -51,8 +61,8 @@ constructor(private platform: Platform) {
5161
}
5262

5363
```
54-
</docs-tab>
55-
<docs-tab tab="react">
64+
</TabItem>
65+
<TabItem value="react">
5666

5767
```typescript
5868
document.addEventListener('ionBackButton', (ev) => {
@@ -61,8 +71,8 @@ document.addEventListener('ionBackButton', (ev) => {
6171
});
6272
});
6373
```
64-
</docs-tab>
65-
<docs-tab tab="vue">
74+
</TabItem>
75+
<TabItem value="vue">
6676

6777
```typescript
6878
import { useBackButton } from '@ionic/vue';
@@ -77,8 +87,8 @@ export default {
7787
}
7888
}
7989
```
80-
</docs-tab>
81-
</docs-tabs>
90+
</TabItem>
91+
</Tabs>
8292

8393
In this example, we are registering a handler to be called when the hardware back button is pressed. We have set the priority to be 10, and we have not indicated to the framework that we want the next handler to be called. As a result, any handlers with a priority less than 10 will not be called. A handler that has a priority greater than 10 will be called first.
8494

@@ -88,8 +98,16 @@ In the event that there are handlers with the same priority value, the handler t
8898

8999
Each hardware back button callback has a `processNextHandler` parameter. Calling this function allows you to continue calling hardware back button handlers.
90100

91-
<docs-tabs>
92-
<docs-tab tab="javascript">
101+
<Tabs
102+
defaultValue="javascript"
103+
values={[
104+
{ value: 'javascript', label: 'JavaScript' },
105+
{ value: 'angular', label: 'Angular' },
106+
{ value: 'react', label: 'React' },
107+
{ value: 'vue', label: 'Vue' },
108+
]
109+
}>
110+
<TabItem value="javascript">
93111

94112
```javascript
95113
document.addEventListener('ionBackButton', (ev) => {
@@ -105,8 +123,8 @@ document.addEventListener('ionBackButton', (ev) => {
105123
});
106124

107125
```
108-
</docs-tab>
109-
<docs-tab tab="angular">
126+
</TabItem>
127+
<TabItem value="angular">
110128

111129
```typescript
112130
import { Platform } from '@ionic/angular';
@@ -126,8 +144,8 @@ constructor(private platform: Platform) {
126144
}
127145

128146
```
129-
</docs-tab>
130-
<docs-tab tab="react">
147+
</TabItem>
148+
<TabItem value="react">
131149

132150
```typescript
133151
document.addEventListener('ionBackButton', (ev) => {
@@ -142,8 +160,8 @@ document.addEventListener('ionBackButton', (ev) => {
142160
});
143161
});
144162
```
145-
</docs-tab>
146-
<docs-tab tab="vue">
163+
</TabItem>
164+
<TabItem value="vue">
147165

148166
```typescript
149167
import { useBackButton } from '@ionic/vue';
@@ -164,8 +182,8 @@ export default {
164182
}
165183
}
166184
```
167-
</docs-tab>
168-
</docs-tabs>
185+
</TabItem>
186+
</Tabs>
169187

170188
This example shows how to indicate to Ionic Framework that you want the next handler to be fired. All callbacks are provided with a `processNextHandler` function as a parameter. Calling this will cause the next handler, if any exists, to be fired.
171189

@@ -198,8 +216,16 @@ In the example above, both handlers A and B have a priority of 10. Since handler
198216

199217
In some scenarios, it may be desirable to quit the app when pressing the hardware back button. This can be achieved through the use of the `ionBackButton` event combined with methods that Capacitor/Cordova provide.
200218

201-
<docs-tabs>
202-
<docs-tab tab="javascript">
219+
<Tabs
220+
defaultValue="javascript"
221+
values={[
222+
{ value: 'javascript', label: 'JavaScript' },
223+
{ value: 'angular', label: 'Angular' },
224+
{ value: 'react', label: 'React' },
225+
{ value: 'vue', label: 'Vue' },
226+
]
227+
}>
228+
<TabItem value="javascript">
203229

204230
```typescript
205231
import { BackButtonEvent } from '@ionic/core';
@@ -218,8 +244,8 @@ document.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
218244
});
219245
});
220246
```
221-
</docs-tab>
222-
<docs-tab tab="angular">
247+
</TabItem>
248+
<TabItem value="angular">
223249

224250
```typescript
225251
import { IonRouterOutlet, Platform } from '@ionic/angular';
@@ -240,8 +266,8 @@ constructor(
240266
}
241267

242268
```
243-
</docs-tab>
244-
<docs-tab tab="react">
269+
</TabItem>
270+
<TabItem value="react">
245271

246272
```typescript
247273
import { useIonRouter } from '@ionic/react';
@@ -259,8 +285,8 @@ document.addEventListener('ionBackButton', (ev) => {
259285
});
260286
});
261287
```
262-
</docs-tab>
263-
<docs-tab tab="vue">
288+
</TabItem>
289+
<TabItem value="vue">
264290

265291
```typescript
266292
import { useBackButton, useIonRouter } from '@ionic/vue';
@@ -280,8 +306,8 @@ export default {
280306
}
281307
}
282308
```
283-
</docs-tab>
284-
</docs-tabs>
309+
</TabItem>
310+
</Tabs>
285311

286312
This example shows the application exiting when the user presses the hardware back button and there is nothing left in the navigation stack. It is also possible to display a confirmation dialog before quitting the app.
287313

‎docs/developing/keyboard.md

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
---
22
---
3+
import Tabs from '@theme/Tabs';
4+
import TabItem from '@theme/TabItem';
35

46
# Keyboard
57

@@ -16,8 +18,16 @@ Inputs that _require_ a certain data type should use the `type` attribute instea
1618
For a list of accepted values, see the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode" target="_blank" rel="noreferrer">inputmode Documentation</a>.
1719

1820
### Usage
19-
<docs-tabs>
20-
<docs-tab tab="Javascript">
21+
<Tabs
22+
defaultValue="javascript"
23+
values={[
24+
{ value: 'javascript', label: 'JavaScript' },
25+
{ value: 'angular', label: 'Angular' },
26+
{ value: 'react', label: 'React' },
27+
{ value: 'vue', label: 'Vue' },
28+
]
29+
}>
30+
<TabItem value="javascript">
2131

2232
```html
2333
<ion-item>
@@ -30,8 +40,8 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
3040
<ion-textarea inputmode="numeric"></ion-textarea>
3141
</ion-item>
3242
```
33-
</docs-tab>
34-
<docs-tab tab="Angular">
43+
</TabItem>
44+
<TabItem value="angular">
3545

3646
```html
3747
<ion-item>
@@ -44,8 +54,8 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
4454
<ion-textarea inputmode="numeric"></ion-textarea>
4555
</ion-item>
4656
```
47-
</docs-tab>
48-
<docs-tab tab="React">
57+
</TabItem>
58+
<TabItem value="react">
4959

5060
```html
5161
<IonItem>
@@ -58,8 +68,8 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
5868
<IonTextarea inputmode="numeric"></IonTextarea>
5969
</IonItem>
6070
```
61-
</docs-tab>
62-
<docs-tab tab="Vue">
71+
</TabItem>
72+
<TabItem value="vue">
6373

6474
```html
6575
<ion-item>
@@ -72,8 +82,8 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
7282
<ion-textarea inputmode="numeric"></ion-textarea>
7383
</ion-item>
7484
```
75-
</docs-tab>
76-
</docs-tabs>
85+
</TabItem>
86+
</Tabs>
7787

7888
<docs-codepen user="ionic" slug="abvJVVv" height="400"></docs-codepen>
7989

@@ -88,44 +98,52 @@ Since `enterkeyhint` is a global attribute, it can be used on Ionic components s
8898
For a list of accepted values, see the <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute" target="_blank" rel="noreferrer">enterkeyhint Standard</a>.
8999

90100
### Usage
91-
<docs-tabs>
92-
<docs-tab tab="Javascript">
101+
<Tabs
102+
defaultValue="javascript"
103+
values={[
104+
{ value: 'javascript', label: 'JavaScript' },
105+
{ value: 'angular', label: 'Angular' },
106+
{ value: 'react', label: 'React' },
107+
{ value: 'vue', label: 'Vue' },
108+
]
109+
}>
110+
<TabItem value="javascript">
93111

94112
```html
95113
<ion-item>
96114
<ion-label>Enter search query</ion-label>
97115
<ion-input enterkeyhint="search" type="search"></ion-input>
98116
</ion-item>
99117
```
100-
</docs-tab>
101-
<docs-tab tab="Angular">
118+
</TabItem>
119+
<TabItem value="angular">
102120

103121
```html
104122
<ion-item>
105123
<ion-label>Enter search query</ion-label>
106124
<ion-input enterkeyhint="search" type="search"></ion-input>
107125
</ion-item>
108126
```
109-
</docs-tab>
110-
<docs-tab tab="React">
127+
</TabItem>
128+
<TabItem value="react">
111129

112130
```html
113131
<IonItem>
114132
<IonLabel>Enter search query</IonLabel>
115133
<IonInput enterkeyhint="search" type="search"></IonInput>
116134
</IonItem>
117135
```
118-
</docs-tab>
119-
<docs-tab tab="Vue">
136+
</TabItem>
137+
<TabItem value="vue">
120138

121139
```html
122140
<ion-item>
123141
<ion-label>Enter search query</ion-label>
124142
<ion-input enterkeyhint="search" type="search"></ion-input>
125143
</ion-item>
126144
```
127-
</docs-tab>
128-
</docs-tabs>
145+
</TabItem>
146+
</Tabs>
129147

130148
<docs-codepen user="ionic" slug="GRpWyRB" height="350"></docs-codepen>
131149

@@ -154,8 +172,16 @@ When running an app in Capacitor or Cordova, it is possible to hide the accessor
154172
Detecting the presence of an on-screen keyboard is useful for adjusting the positioning of an input that would otherwise be hidden by the keyboard. For Capacitor and Cordova apps, developers typically rely on native keyboard plugins to listen for the keyboard lifecycle events. For apps running in a mobile browser or as a PWA, developers can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API" rel="noreferrer" target="_blank">Visual Viewport API</a> where supported. Ionic Framework wraps both of these approaches and emits `ionKeyboardDidShow` and `ionKeyboardDidHide` events on the `window`. The event payload for `ionKeyboardDidShow` contains an approximation of the keyboard height in pixels.
155173

156174
### Usage
157-
<docs-tabs>
158-
<docs-tab tab="Javascript">
175+
<Tabs
176+
defaultValue="javascript"
177+
values={[
178+
{ value: 'javascript', label: 'JavaScript' },
179+
{ value: 'angular', label: 'Angular' },
180+
{ value: 'react', label: 'React' },
181+
{ value: 'vue', label: 'Vue' },
182+
]
183+
}>
184+
<TabItem value="javascript">
159185

160186
```javascript
161187
window.addEventListener('ionKeyboardDidShow', ev => {
@@ -167,8 +193,8 @@ window.addEventListener('ionKeyboardDidHide', () => {
167193
// Move input back to original location
168194
});
169195
```
170-
</docs-tab>
171-
<docs-tab tab="Angular">
196+
</TabItem>
197+
<TabItem value="angular">
172198

173199
```typescript
174200
import { Platform } from '@ionic/angular';
@@ -186,8 +212,8 @@ constructor(private platform: Platform) {
186212
});
187213
}
188214
```
189-
</docs-tab>
190-
<docs-tab tab="React">
215+
</TabItem>
216+
<TabItem value="react">
191217

192218
```tsx
193219
import { useKeyboardState } from '@ionic/react-hooks/keyboard';
@@ -198,8 +224,8 @@ const { isOpen, keyboardHeight } = useKeyboardState();
198224

199225
// Do something with the keyboard height such as translating an input above the keyboard
200226
```
201-
</docs-tab>
202-
<docs-tab tab="Vue">
227+
</TabItem>
228+
<TabItem value="vue">
203229

204230
```typescript
205231
import { useKeyboard } from '@ionic/vue';
@@ -215,7 +241,7 @@ watch(keyboardHeight, () => {
215241

216242

217243
```
218-
</docs-tab>
219-
</docs-tabs>
244+
</TabItem>
245+
</Tabs>
220246

221247
> For apps running in a mobile web browser or as a PWA, Keyboard Lifecycle Events are only supported on Chrome 62+ and iOS Safari 13.0+.

0 commit comments

Comments
 (0)