javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(item): add button property to items with click handler (#20049)

Browse Source
This commit is contained in:
Antoine
2019-12-16 13:47:17 -05:00
committed by Liam DeBeasi
parent 6612604733
commit 6d6aba6d40
5 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/src/components/item/readme.md
View File

@ -72,7 +72,7 @@ Basic Usage
</ion-item> </ion-item>
<!-- Item as a Button --> <!-- Item as a Button -->
<ion-item (click)="buttonClick()"> <ion-item button (click)="buttonClick()">
<ion-label> <ion-label>
Button Item Button Item
</ion-label> </ion-label>
@ -101,7 +101,7 @@ Detail Arrows
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item (click)="buttonClick()" detail> <ion-item button (click)="buttonClick()" detail>
<ion-label> <ion-label>
Button Item with Detail Arrow Button Item with Detail Arrow
</ion-label> </ion-label>
@ -218,7 +218,7 @@ Item Lines
Media Items Media Items
```html ```html
<ion-item (click)="testClick()"> <ion-item button (click)="testClick()">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
@ -247,7 +247,7 @@ Media Items
<ion-button fill="outline" slot="end">View</ion-button> <ion-button fill="outline" slot="end">View</ion-button>
</ion-item> </ion-item>
<ion-item (click)="testClick()"> <ion-item button (click)="testClick()">
<ion-thumbnail slot="start"> <ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail> </ion-thumbnail>
@ -396,7 +396,7 @@ Basic Usage
</ion-item> </ion-item>
<!-- Item as a Button --> <!-- Item as a Button -->
<ion-item onclick="buttonClick()"> <ion-item button onclick="buttonClick()">
<ion-label> <ion-label>
Button Item Button Item
</ion-label> </ion-label>
@ -425,7 +425,7 @@ Detail Arrows
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item onclick="buttonClick()" detail> <ion-item button onclick="buttonClick()" detail>
<ion-label> <ion-label>
Button Item with Detail Arrow Button Item with Detail Arrow
</ion-label> </ion-label>
@ -542,7 +542,7 @@ Item Lines
Media Items Media Items
```html ```html
<ion-item onclick="testClick()"> <ion-item button onclick="testClick()">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
@ -571,7 +571,7 @@ Media Items
<ion-button fill="outline" slot="end">View</ion-button> <ion-button fill="outline" slot="end">View</ion-button>
</ion-item> </ion-item>
<ion-item onclick="testClick()"> <ion-item button onclick="testClick()">
<ion-thumbnail slot="start"> <ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail> </ion-thumbnail>
@ -724,7 +724,7 @@ const Example: React.FC<{}> = () => (
</IonItem> </IonItem>
{/*-- Item as a Button --*/} {/*-- Item as a Button --*/}
<IonItem onClick={() => {}}> <IonItem button onClick={() => {}}>
<IonLabel> <IonLabel>
Button Item Button Item
</IonLabel> </IonLabel>
@ -751,7 +751,7 @@ const Example: React.FC<{}> = () => (
</IonLabel> </IonLabel>
</IonItem> </IonItem>
<IonItem onClick={() => {}} detail> <IonItem button onClick={() => {}} detail>
<IonLabel> <IonLabel>
Button Item with Detail Arrow Button Item with Detail Arrow
</IonLabel> </IonLabel>
@ -859,7 +859,7 @@ const Example: React.FC<{}> = () => (
<IonItem onClick={() => {}}> <IonItem button onClick={() => {}}>
<IonAvatar slot="start"> <IonAvatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
</IonAvatar> </IonAvatar>
@ -888,7 +888,7 @@ const Example: React.FC<{}> = () => (
<IonButton fill="outline" slot="end">View</IonButton> <IonButton fill="outline" slot="end">View</IonButton>
</IonItem> </IonItem>
<IonItem onClick={() => {}}> <IonItem button onClick={() => {}}>
<IonThumbnail slot="start"> <IonThumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
</IonThumbnail> </IonThumbnail>
@ -1035,7 +1035,7 @@ Basic Usage
</ion-item> </ion-item>
<!-- Item as a Button --> <!-- Item as a Button -->
<ion-item @click="buttonClick()"> <ion-item button @click="buttonClick()">
<ion-label> <ion-label>
Button Item Button Item
</ion-label> </ion-label>
@ -1066,7 +1066,7 @@ Detail Arrows
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item @click="buttonClick()" detail> <ion-item button @click="buttonClick()" detail>
<ion-label> <ion-label>
Button Item with Detail Arrow Button Item with Detail Arrow
</ion-label> </ion-label>
@ -1189,7 +1189,7 @@ Media Items
```html ```html
<template> <template>
<ion-item @click="testClick()"> <ion-item button @click="testClick()">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
@ -1218,7 +1218,7 @@ Media Items
<ion-button fill="outline" slot="end">View</ion-button> <ion-button fill="outline" slot="end">View</ion-button>
</ion-item> </ion-item>
<ion-item @click="testClick()"> <ion-item button @click="testClick()">
<ion-thumbnail slot="start"> <ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail> </ion-thumbnail>

8
core/src/components/item/usage/angular.md
View File

@ -9,7 +9,7 @@ Basic Usage
</ion-item> </ion-item>
<!-- Item as a Button --> <!-- Item as a Button -->
<ion-item (click)="buttonClick()"> <ion-item button (click)="buttonClick()">
<ion-label> <ion-label>
Button Item Button Item
</ion-label> </ion-label>
@ -38,7 +38,7 @@ Detail Arrows
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item (click)="buttonClick()" detail> <ion-item button (click)="buttonClick()" detail>
<ion-label> <ion-label>
Button Item with Detail Arrow Button Item with Detail Arrow
</ion-label> </ion-label>
@ -155,7 +155,7 @@ Item Lines
Media Items Media Items
```html ```html
<ion-item (click)="testClick()"> <ion-item button (click)="testClick()">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
@ -184,7 +184,7 @@ Media Items
<ion-button fill="outline" slot="end">View</ion-button> <ion-button fill="outline" slot="end">View</ion-button>
</ion-item> </ion-item>
<ion-item (click)="testClick()"> <ion-item button (click)="testClick()">
<ion-thumbnail slot="start"> <ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail> </ion-thumbnail>

8
core/src/components/item/usage/javascript.md
View File

@ -9,7 +9,7 @@ Basic Usage
</ion-item> </ion-item>
<!-- Item as a Button --> <!-- Item as a Button -->
<ion-item onclick="buttonClick()"> <ion-item button onclick="buttonClick()">
<ion-label> <ion-label>
Button Item Button Item
</ion-label> </ion-label>
@ -38,7 +38,7 @@ Detail Arrows
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item onclick="buttonClick()" detail> <ion-item button onclick="buttonClick()" detail>
<ion-label> <ion-label>
Button Item with Detail Arrow Button Item with Detail Arrow
</ion-label> </ion-label>
@ -155,7 +155,7 @@ Item Lines
Media Items Media Items
```html ```html
<ion-item onclick="testClick()"> <ion-item button onclick="testClick()">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
@ -184,7 +184,7 @@ Media Items
<ion-button fill="outline" slot="end">View</ion-button> <ion-button fill="outline" slot="end">View</ion-button>
</ion-item> </ion-item>
<ion-item onclick="testClick()"> <ion-item button onclick="testClick()">
<ion-thumbnail slot="start"> <ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail> </ion-thumbnail>

8
core/src/components/item/usage/react.md
View File

@ -13,7 +13,7 @@ const Example: React.FC<{}> = () => (
</IonItem> </IonItem>
{/*-- Item as a Button --*/} {/*-- Item as a Button --*/}
<IonItem onClick={() => {}}> <IonItem button onClick={() => {}}>
<IonLabel> <IonLabel>
Button Item Button Item
</IonLabel> </IonLabel>
@ -40,7 +40,7 @@ const Example: React.FC<{}> = () => (
</IonLabel> </IonLabel>
</IonItem> </IonItem>
<IonItem onClick={() => {}} detail> <IonItem button onClick={() => {}} detail>
<IonLabel> <IonLabel>
Button Item with Detail Arrow Button Item with Detail Arrow
</IonLabel> </IonLabel>
@ -148,7 +148,7 @@ const Example: React.FC<{}> = () => (
<IonItem onClick={() => {}}> <IonItem button onClick={() => {}}>
<IonAvatar slot="start"> <IonAvatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
</IonAvatar> </IonAvatar>
@ -177,7 +177,7 @@ const Example: React.FC<{}> = () => (
<IonButton fill="outline" slot="end">View</IonButton> <IonButton fill="outline" slot="end">View</IonButton>
</IonItem> </IonItem>
<IonItem onClick={() => {}}> <IonItem button onClick={() => {}}>
<IonThumbnail slot="start"> <IonThumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
</IonThumbnail> </IonThumbnail>

8
core/src/components/item/usage/vue.md
View File

@ -10,7 +10,7 @@ Basic Usage
</ion-item> </ion-item>
<!-- Item as a Button --> <!-- Item as a Button -->
<ion-item @click="buttonClick()"> <ion-item button @click="buttonClick()">
<ion-label> <ion-label>
Button Item Button Item
</ion-label> </ion-label>
@ -41,7 +41,7 @@ Detail Arrows
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item @click="buttonClick()" detail> <ion-item button @click="buttonClick()" detail>
<ion-label> <ion-label>
Button Item with Detail Arrow Button Item with Detail Arrow
</ion-label> </ion-label>
@ -164,7 +164,7 @@ Media Items
```html ```html
<template> <template>
<ion-item @click="testClick()"> <ion-item button @click="testClick()">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar> </ion-avatar>
@ -193,7 +193,7 @@ Media Items
<ion-button fill="outline" slot="end">View</ion-button> <ion-button fill="outline" slot="end">View</ion-button>
</ion-item> </ion-item>
<ion-item @click="testClick()"> <ion-item button @click="testClick()">
<ion-thumbnail slot="start"> <ion-thumbnail slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail> </ion-thumbnail>