Skip to content

Commit ba23835

Browse files
ShaneKShaneK
authored
docs(item): add routing section explaining how routerLink works (#4456)
1 parent fbf2799 commit ba23835

File tree

1 file changed

+107
-2
lines changed

1 file changed

+107
-2
lines changed

‎docs/api/item.md‎

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import Slots from '@ionic-internal/component-api/v9/item/slots.md';
1010

1111
import useBaseUrl from '@docusaurus/useBaseUrl';
1212
import BestPracticeFigure from '@components/global/BestPracticeFigure';
13+
import Tabs from '@theme/Tabs';
14+
import TabItem from '@theme/TabItem';
1315

1416
<head>
1517
<title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
@@ -163,13 +165,116 @@ import Controls from '@site/static/usage/v9/item/content-types/controls/index.md
163165

164166
## Clickable Items
165167

166-
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.
168+
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.
167169

168170
import Clickable from '@site/static/usage/v9/item/clickable/index.md';
169171

170172
<Clickable />
171173

172174

175+
## Routing
176+
177+
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.
178+
179+
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
180+
181+
<TabItem value="angular">
182+
183+
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.
184+
185+
```html
186+
<ion-list>
187+
<ion-item [routerLink]="['/home']">
188+
<ion-label>Go to Home</ion-label>
189+
</ion-item>
190+
<ion-item [routerLink]="['/home']" routerDirection="back">
191+
<ion-label>Go Back to Home</ion-label>
192+
</ion-item>
193+
</ion-list>
194+
```
195+
196+
```typescript
197+
import { Component } from '@angular/core';
198+
import { IonItem, IonLabel, IonList, IonRouterLink } from '@ionic/angular/standalone';
199+
import { RouterLink } from '@angular/router';
200+
201+
@Component({
202+
selector: 'app-example',
203+
templateUrl: 'example.component.html',
204+
imports: [IonItem, IonLabel, IonList, RouterLink, IonRouterLink],
205+
})
206+
export class ExampleComponent {}
207+
```
208+
209+
</TabItem>
210+
211+
<TabItem value="javascript">
212+
213+
In JavaScript, set the `router-link` attribute on `ion-item` to navigate using [ion-router](./router).
214+
215+
```html
216+
<ion-list>
217+
<ion-item router-link="/home">
218+
<ion-label>Go to Home</ion-label>
219+
</ion-item>
220+
<ion-item router-link="/home" router-direction="back">
221+
<ion-label>Go Back to Home</ion-label>
222+
</ion-item>
223+
</ion-list>
224+
```
225+
226+
</TabItem>
227+
228+
<TabItem value="react">
229+
230+
In React, `IonItem` accepts a `routerLink` prop that triggers client-side navigation via Ionic's React Router integration.
231+
232+
```tsx
233+
import { IonItem, IonLabel, IonList } from '@ionic/react';
234+
235+
function Example() {
236+
return (
237+
<IonList>
238+
<IonItem routerLink="/home">
239+
<IonLabel>Go to Home</IonLabel>
240+
</IonItem>
241+
<IonItem routerLink="/home" routerDirection="back">
242+
<IonLabel>Go Back to Home</IonLabel>
243+
</IonItem>
244+
</IonList>
245+
);
246+
}
247+
export default Example;
248+
```
249+
250+
</TabItem>
251+
252+
<TabItem value="vue">
253+
254+
In Vue, use the `router-link` attribute on `ion-item`. The `router-direction` and `router-animation` attributes are also available for controlling the transition.
255+
256+
```html
257+
<template>
258+
<ion-list>
259+
<ion-item router-link="/home">
260+
<ion-label>Go to Home</ion-label>
261+
</ion-item>
262+
<ion-item router-link="/home" router-direction="back">
263+
<ion-label>Go Back to Home</ion-label>
264+
</ion-item>
265+
</ion-list>
266+
</template>
267+
268+
<script setup lang="ts">
269+
import { IonItem, IonLabel, IonList } from '@ionic/vue';
270+
</script>
271+
```
272+
273+
</TabItem>
274+
275+
</Tabs>
276+
277+
173278
## Detail Arrows
174279

175280
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 `<ion-item>` renders a native `<a>` element, the keyboard interactions f
292397
<CustomProps />
293398

294399
## Slots
295-
<Slots />
400+
<Slots />

0 commit comments

Comments
 (0)