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

docs(action-sheet): add javascript and angular example docs

Browse Source
This commit is contained in:
Brandy Carney
2018-03-28 12:20:16 -04:00
parent 0105a4ee47
commit 67488b2eca
3 changed files with 100 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
core/src/components/action-sheet/docs/angular.md Normal file
View File

@ -0,0 +1,56 @@
```javascript
import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
@Component({
selector: 'action-sheet-example',
templateUrl: 'action-sheet-example.html',
styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {
constructor(public actionSheetController: ActionSheetController) {}
presentActionSheet() {
const actionSheet = this.actionSheetController.create({
title: "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: 'arrow-dropright-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');
}
}]
});
actionSheet.present();
}
}
```

44
core/src/components/action-sheet/docs/javascript.md Normal file
View File

@ -0,0 +1,44 @@
```javascript
async function presentActionSheet() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheet = await actionSheetController.create({
title: "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: 'arrow-dropright-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();
}
```

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

@ -10,50 +10,6 @@ An action sheet can be created by the [Action Sheet Controller](../../action-she
A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
```javascript
async function presentBasic() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "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: 'arrow-dropright-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 actionSheetElement.present();
}
```
<!-- Auto Generated Below -->