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

fix(action-sheet): add button-inner wrapper to cancel button

Browse Source
This commit is contained in:
Brandy Carney
2017-12-07 14:15:47 -05:00
parent a812ee8854
commit 2f02ab1ec5
2 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@@ -292,13 +292,15 @@ export class ActionSheet {
class={this.buttonClass(cancelButton)}
onClick={() => this.buttonClick(cancelButton)}
>
{cancelButton.icon
? <ion-icon
name={cancelButton.icon}
class='action-sheet-icon'
/>
: null}
{cancelButton.text}
<span class='button-inner'>
{cancelButton.icon
? <ion-icon
name={cancelButton.icon}
class='action-sheet-icon'
/>
: null}
{cancelButton.text}
</span>
</button>
</div>

44
packages/core/src/components/action-sheet/test/basic/index.html
View File

@@ -21,6 +21,7 @@
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
<ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
@@ -37,6 +38,45 @@
async function presentBasic() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
})
await actionSheetElement.present();
}
async function presentIcons() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
@@ -62,14 +102,14 @@
}
}, {
text: 'Favorite',
icon: mode !== 'ios' ? 'heart' : null,
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
icon: mode !== 'ios' ? 'close' : null,
icon: 'close',
handler: () => {
console.log('Cancel clicked');
}