diff --git a/docs/api/item.md b/docs/api/item.md index f2332dea915..7b598d3487c 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -10,6 +10,8 @@ import Slots from '@ionic-internal/component-api/v9/item/slots.md'; import useBaseUrl from '@docusaurus/useBaseUrl'; import BestPracticeFigure from '@components/global/BestPracticeFigure'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; ion-item: Input, Edit, or Delete iOS and Android Item Elements @@ -163,13 +165,116 @@ import Controls from '@site/static/usage/v9/item/content-types/controls/index.md ## Clickable Items -An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode. +An item is considered "clickable" if it has an `href`, `button`, or `routerLink` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode. import Clickable from '@site/static/usage/v9/item/clickable/index.md'; +## Routing + +Items support client-side navigation using the `routerLink` property. Setting `routerLink` renders the item as an anchor and navigates to the specified route when tapped. The `routerDirection` property controls the transition animation direction, and `routerAnimation` accepts a custom animation builder. + + + + + +In Angular, `routerLink` is a directive provided by `@angular/router`. When used on Ionic components, also import `IonRouterLink` from `@ionic/angular/standalone` to enable `routerDirection` and `routerAnimation` support. + +```html + + + Go to Home + + + Go Back to Home + + +``` + +```typescript +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonRouterLink } from '@ionic/angular/standalone'; +import { RouterLink } from '@angular/router'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonItem, IonLabel, IonList, RouterLink, IonRouterLink], +}) +export class ExampleComponent {} +``` + + + + + +In JavaScript, set the `router-link` attribute on `ion-item` to navigate using [ion-router](./router). + +```html + + + Go to Home + + + Go Back to Home + + +``` + + + + + +In React, `IonItem` accepts a `routerLink` prop that triggers client-side navigation via Ionic's React Router integration. + +```tsx +import { IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + Go to Home + + + Go Back to Home + + + ); +} +export default Example; +``` + + + + + +In Vue, use the `router-link` attribute on `ion-item`. The `router-direction` and `router-animation` attributes are also available for controlling the transition. + +```html + + + +``` + + + + + + ## Detail Arrows By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`. @@ -292,4 +397,4 @@ When an `` renders a native `` element, the keyboard interactions f ## Slots - + \ No newline at end of file