diff --git a/docs/api/radio.md b/docs/api/radio.md index d6ad9744e34..c22b839f24e 100644 --- a/docs/api/radio.md +++ b/docs/api/radio.md @@ -40,7 +40,7 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md 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. -import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md'; +import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/index.md'; @@ -110,7 +110,7 @@ Using the modern syntax involves removing the `ion-label` and passing the label import Migration from '@site/static/usage/v8/radio/migration/index.md'; - + :::note 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. diff --git a/docs/api/toast.md b/docs/api/toast.md index fc0ee71cd85..a111e574566 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.md @@ -76,10 +76,10 @@ import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md 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. -import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md'; +import SwipeGesture from '@site/static/usage/v8/toast/swipe-gesture/index.md'; - + ## Layout 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. diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_html.md b/static/usage/v8/radio/using-comparewith/angular/example_component_html.md new file mode 100644 index 00000000000..1e5e93819fa --- /dev/null +++ b/static/usage/v8/radio/using-comparewith/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + + {{ food.name }} + + + +``` diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md new file mode 100644 index 00000000000..d7f803aea0b --- /dev/null +++ b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md @@ -0,0 +1,39 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + foods = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, + ]; + + compareWith(o1, o2) { + return o1.id === o2.id; + } + + handleChange(ev) { + console.log('Current value:', JSON.stringify(ev.target.value)); + } + + trackItems(index: number, item: any) { + return item.id; + } +} +``` diff --git a/static/usage/v8/radio/using-comparewith/demo.html b/static/usage/v8/radio/using-comparewith/demo.html new file mode 100644 index 00000000000..39805ea0b92 --- /dev/null +++ b/static/usage/v8/radio/using-comparewith/demo.html @@ -0,0 +1,67 @@ + + + + + + Radio + + + + + + + + + +
+ + + +
+ + + + + + diff --git a/static/usage/v8/radio/using-comparewith/index.md b/static/usage/v8/radio/using-comparewith/index.md new file mode 100644 index 00000000000..dc7eb552f4a --- /dev/null +++ b/static/usage/v8/radio/using-comparewith/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/radio/using-comparewith/javascript.md b/static/usage/v8/radio/using-comparewith/javascript.md new file mode 100644 index 00000000000..8dd2130b3e8 --- /dev/null +++ b/static/usage/v8/radio/using-comparewith/javascript.md @@ -0,0 +1,48 @@ +```html + + + + + +``` diff --git a/static/usage/v8/radio/using-comparewith/react.md b/static/usage/v8/radio/using-comparewith/react.md new file mode 100644 index 00000000000..dff3b4233a6 --- /dev/null +++ b/static/usage/v8/radio/using-comparewith/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; + +interface Food { + id: number; + name: string; + type: string; +} + +const foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, +]; + +const compareWith = (o1: Food, o2: Food) => { + return o1.id === o2.id; +}; + +function Example() { + return ( + + console.log('Current value:', JSON.stringify(ev.detail.value))} + > + {foods.map((food) => ( + + + {food.name} + + + ))} + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/using-comparewith/vue.md b/static/usage/v8/radio/using-comparewith/vue.md new file mode 100644 index 00000000000..28518284654 --- /dev/null +++ b/static/usage/v8/radio/using-comparewith/vue.md @@ -0,0 +1,54 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/swipe-gesture/angular.md b/static/usage/v8/toast/swipe-gesture/angular.md new file mode 100644 index 00000000000..146007d0391 --- /dev/null +++ b/static/usage/v8/toast/swipe-gesture/angular.md @@ -0,0 +1,17 @@ +```html + + Open Toast + + + + + Footer + + +``` diff --git a/static/usage/v8/toast/swipe-gesture/demo.html b/static/usage/v8/toast/swipe-gesture/demo.html new file mode 100644 index 00000000000..d2cebd4a95e --- /dev/null +++ b/static/usage/v8/toast/swipe-gesture/demo.html @@ -0,0 +1,35 @@ + + + + + + Toast + + + + + + + + + +
+ Open Toast + +
+ + + + + Footer + + + + + diff --git a/static/usage/v8/toast/swipe-gesture/index.md b/static/usage/v8/toast/swipe-gesture/index.md new file mode 100644 index 00000000000..dfb56a081b9 --- /dev/null +++ b/static/usage/v8/toast/swipe-gesture/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toast/swipe-gesture/javascript.md b/static/usage/v8/toast/swipe-gesture/javascript.md new file mode 100644 index 00000000000..2b7f79e79d4 --- /dev/null +++ b/static/usage/v8/toast/swipe-gesture/javascript.md @@ -0,0 +1,17 @@ +```html + + Open Toast + + + + + Footer + + +``` diff --git a/static/usage/v8/toast/swipe-gesture/react.md b/static/usage/v8/toast/swipe-gesture/react.md new file mode 100644 index 00000000000..09bbd89e3fd --- /dev/null +++ b/static/usage/v8/toast/swipe-gesture/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + Open Toast + + + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toast/swipe-gesture/vue.md b/static/usage/v8/toast/swipe-gesture/vue.md new file mode 100644 index 00000000000..8aaf3583a98 --- /dev/null +++ b/static/usage/v8/toast/swipe-gesture/vue.md @@ -0,0 +1,23 @@ +```html + + + +```