javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(stencil): add stencil usage to components (#21261)

Browse Source
This commit is contained in:
Brandy Carney
2020-05-12 20:35:48 -04:00
committed by GitHub
parent 703ef5c992
commit 687122127c
177 changed files with 11193 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
core/src/components/action-sheet/readme.md
View File

@ -45,7 +45,7 @@ export class ActionSheetExample {
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked');
}
@ -94,7 +94,7 @@ async function presentActionSheet() {
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked');
}
@ -121,9 +121,9 @@ async function presentActionSheet() {
### React
```typescript
import React, { useState } from 'react'
import React, { useState } from 'react';
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
import { trash, share, playCircleOutline, heart, close } from 'ionicons/icons';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
export const ActionSheetExample: React.FC = () => {
@ -150,7 +150,7 @@ export const ActionSheetExample: React.FC = () => {
}
}, {
text: 'Play (open modal)',
icon: playCircleOutline,
icon: caretForwardCircle,
handler: () => {
console.log('Play clicked');
}
@ -179,6 +179,69 @@ export const ActionSheetExample: React.FC = () => {
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
import { actionSheetController } from '@ionic/core';
@Component({
tag: 'action-sheet-example',
styleUrl: 'action-sheet-example.css'
})
export class ActionSheetExample {
async presentActionSheet() {
const actionSheet = await actionSheetController.create({
header: 'Albums',
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
render() {
return [
<ion-content>
<ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
</ion-content>
];
}
}
```
### Vue
```html
@ -213,7 +276,7 @@ export default {
},
{
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked')
},

2
core/src/components/action-sheet/usage/angular.md
View File

@ -29,7 +29,7 @@ export class ActionSheetExample {
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked');
}

2
core/src/components/action-sheet/usage/javascript.md
View File

@ -19,7 +19,7 @@ async function presentActionSheet() {
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked');
}

6
core/src/components/action-sheet/usage/react.md
View File

@ -1,7 +1,7 @@
```typescript
import React, { useState } from 'react'
import React, { useState } from 'react';
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
import { trash, share, playCircleOutline, heart, close } from 'ionicons/icons';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
export const ActionSheetExample: React.FC = () => {
@ -28,7 +28,7 @@ export const ActionSheetExample: React.FC = () => {
}
}, {
text: 'Play (open modal)',
icon: playCircleOutline,
icon: caretForwardCircle,
handler: () => {
console.log('Play clicked');
}

59
core/src/components/action-sheet/usage/stencil.md Normal file
View File

@ -0,0 +1,59 @@
```tsx
import { Component, h } from '@stencil/core';
import { actionSheetController } from '@ionic/core';
@Component({
tag: 'action-sheet-example',
styleUrl: 'action-sheet-example.css'
})
export class ActionSheetExample {
async presentActionSheet() {
const actionSheet = await actionSheetController.create({
header: 'Albums',
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
render() {
return [
<ion-content>
<ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
</ion-content>
];
}
}
```

2
core/src/components/action-sheet/usage/vue.md
View File

@ -30,7 +30,7 @@ export default {
},
{
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
icon: 'caret-forward-circle',
handler: () => {
console.log('Play clicked')
},