Skip to content

Commit 7c39392

Browse files
brandyscarneybrandyscarney
authored
docs(api): use v8 demos instead of v7 demos for latest playgrounds (#3759)
1 parent 015b1ce commit 7c39392

File tree

15 files changed

+436
-4
lines changed

15 files changed

+436
-4
lines changed

‎docs/api/radio.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md
4040

4141
By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
4242

43-
import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md';
43+
import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/index.md';
4444

4545
<UsingComparewith />
4646

@@ -110,7 +110,7 @@ Using the modern syntax involves removing the `ion-label` and passing the label
110110
import Migration from '@site/static/usage/v8/radio/migration/index.md';
111111

112112
<Migration />
113-
113+
114114

115115
:::note
116116
In past versions of Ionic, `ion-item` was required for `ion-radio` to function properly. Starting in Ionic 7.0, `ion-radio` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-radio` to function properly.

‎docs/api/toast.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,10 @@ import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md
7676

7777
Toasts can be swiped to dismiss by using the `swipeGesture` property. This feature is position-aware, meaning the direction that users need to swipe will change based on the value of the `position` property. Additionally, the distance users need to swipe may be impacted by the `positionAnchor` property.
7878

79-
import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
79+
import SwipeGesture from '@site/static/usage/v8/toast/swipe-gesture/index.md';
8080

8181
<SwipeGesture />
82-
82+
8383
## Layout
8484

8585
Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.

‎static/usage/v8/radio/using-comparewith/angular/example_component_html.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
4+
<ion-item *ngFor="let food of foods; trackBy: trackItems">
5+
<ion-radio [value]="food">{{ food.name }}</ion-radio>
6+
</ion-item>
7+
</ion-radio-group>
8+
</ion-list>
9+
```

‎static/usage/v8/radio/using-comparewith/angular/example_component_ts.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent {
9+
foods = [
10+
{
11+
id: 1,
12+
name: 'Apples',
13+
type: 'fruit',
14+
},
15+
{
16+
id: 2,
17+
name: 'Carrots',
18+
type: 'vegetable',
19+
},
20+
{
21+
id: 3,
22+
name: 'Cupcakes',
23+
type: 'dessert',
24+
},
25+
];
26+
27+
compareWith(o1, o2) {
28+
return o1.id === o2.id;
29+
}
30+
31+
handleChange(ev) {
32+
console.log('Current value:', JSON.stringify(ev.target.value));
33+
}
34+
35+
trackItems(index: number, item: any) {
36+
return item.id;
37+
}
38+
}
39+
```

‎static/usage/v8/radio/using-comparewith/demo.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Radio</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-radio-group></ion-radio-group>
19+
</ion-list>
20+
</div>
21+
</ion-content>
22+
</ion-app>
23+
24+
<script>
25+
const foods = [
26+
{
27+
id: 1,
28+
name: 'Apples',
29+
type: 'fruit',
30+
},
31+
{
32+
id: 2,
33+
name: 'Carrots',
34+
type: 'vegetable',
35+
},
36+
{
37+
id: 3,
38+
name: 'Cupcakes',
39+
type: 'dessert',
40+
},
41+
];
42+
43+
const compareWithFn = (o1, o2) => {
44+
return o1.id === o2.id;
45+
};
46+
47+
const radioGroupEl = document.querySelector('ion-radio-group');
48+
radioGroupEl.compareWith = compareWithFn;
49+
50+
foods.forEach((option, i) => {
51+
const radio = document.createElement('ion-radio');
52+
53+
radio.value = option;
54+
radio.textContent = option.name;
55+
56+
const item = document.createElement('ion-item');
57+
item.appendChild(radio);
58+
59+
radioGroupEl.appendChild(item);
60+
});
61+
62+
radioGroupEl.addEventListener('ionChange', () => {
63+
console.log('Current value:', JSON.stringify(radioGroupEl.value));
64+
});
65+
</script>
66+
</body>
67+
</html>

‎static/usage/v8/radio/using-comparewith/index.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="8"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
23+
src="usage/v8/radio/using-comparewith/demo.html"
24+
showConsole={true}
25+
/>

‎static/usage/v8/radio/using-comparewith/javascript.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group></ion-radio-group>
4+
</ion-list>
5+
6+
<script>
7+
const foods = [
8+
{
9+
id: 1,
10+
name: 'Apples',
11+
type: 'fruit',
12+
},
13+
{
14+
id: 2,
15+
name: 'Carrots',
16+
type: 'vegetable',
17+
},
18+
{
19+
id: 3,
20+
name: 'Cupcakes',
21+
type: 'dessert',
22+
},
23+
];
24+
25+
const compareWithFn = (o1, o2) => {
26+
return o1.id === o2.id;
27+
};
28+
29+
const radioGroupEl = document.querySelector('ion-radio-group');
30+
radioGroupEl.compareWith = compareWithFn;
31+
32+
foods.forEach((option, i) => {
33+
const radio = document.createElement('ion-radio');
34+
35+
radio.value = option;
36+
radio.textContent = option.name;
37+
38+
const item = document.createElement('ion-item');
39+
item.appendChild(radio);
40+
41+
radioGroupEl.appendChild(item);
42+
});
43+
44+
radioGroupEl.addEventListener('ionChange', () => {
45+
console.log('Current value:', JSON.stringify(radioGroupEl.value));
46+
});
47+
</script>
48+
```

‎static/usage/v8/radio/using-comparewith/react.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
4+
5+
interface Food {
6+
id: number;
7+
name: string;
8+
type: string;
9+
}
10+
11+
const foods: Food[] = [
12+
{
13+
id: 1,
14+
name: 'Apples',
15+
type: 'fruit',
16+
},
17+
{
18+
id: 2,
19+
name: 'Carrots',
20+
type: 'vegetable',
21+
},
22+
{
23+
id: 3,
24+
name: 'Cupcakes',
25+
type: 'dessert',
26+
},
27+
];
28+
29+
const compareWith = (o1: Food, o2: Food) => {
30+
return o1.id === o2.id;
31+
};
32+
33+
function Example() {
34+
return (
35+
<IonList>
36+
<IonRadioGroup
37+
compareWith={compareWith}
38+
onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
39+
>
40+
{foods.map((food) => (
41+
<IonItem>
42+
<IonRadio key={food.id} value={food}>
43+
{food.name}
44+
</IonRadio>
45+
</IonItem>
46+
))}
47+
</IonRadioGroup>
48+
</IonList>
49+
);
50+
}
51+
export default Example;
52+
```

‎static/usage/v8/radio/using-comparewith/vue.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-radio-group :compareWith="compareWith" @ionChange="handleChange($event)">
5+
<ion-item v-for="food in foods">
6+
<ion-radio :value="food">{{ food.name }}</ion-radio>
7+
</ion-item>
8+
</ion-radio-group>
9+
</ion-list>
10+
</template>
11+
12+
<script lang="ts">
13+
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
14+
import { defineComponent } from 'vue';
15+
16+
export default defineComponent({
17+
components: {
18+
IonItem,
19+
IonList,
20+
IonRadio,
21+
IonRadioGroup,
22+
},
23+
data() {
24+
return {
25+
foods: [
26+
{
27+
id: 1,
28+
name: 'Apples',
29+
type: 'fruit',
30+
},
31+
{
32+
id: 2,
33+
name: 'Carrots',
34+
type: 'vegetable',
35+
},
36+
{
37+
id: 3,
38+
name: 'Cupcakes',
39+
type: 'dessert',
40+
},
41+
],
42+
};
43+
},
44+
methods: {
45+
compareWith(o1, o2) {
46+
return o1.id === o2.id;
47+
},
48+
handleChange(ev) {
49+
console.log('Current value:', JSON.stringify(ev.detail.value));
50+
},
51+
},
52+
});
53+
</script>
54+
```

‎static/usage/v8/toast/swipe-gesture/angular.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-content class="ion-padding">
3+
<ion-button id="open-toast">Open Toast</ion-button>
4+
<ion-toast
5+
message="This toast can be swiped to dismiss"
6+
trigger="open-toast"
7+
swipeGesture="vertical"
8+
position="bottom"
9+
positionAnchor="footer"
10+
></ion-toast>
11+
</ion-content>
12+
<ion-footer id="footer">
13+
<ion-toolbar>
14+
<ion-title>Footer</ion-title>
15+
</ion-toolbar>
16+
</ion-footer>
17+
```

‎static/usage/v8/toast/swipe-gesture/demo.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Toast</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-button id="open-toast">Open Toast</ion-button>
18+
<ion-toast
19+
message="This toast can be swiped to dismiss"
20+
trigger="open-toast"
21+
swipe-gesture="vertical"
22+
position="bottom"
23+
position-anchor="footer"
24+
></ion-toast>
25+
</div>
26+
</ion-content>
27+
28+
<ion-footer id="footer">
29+
<ion-toolbar>
30+
<ion-title>Footer</ion-title>
31+
</ion-toolbar>
32+
</ion-footer>
33+
</ion-app>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)