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

feat(alert): cssClass for buttons and component

Browse Source
This commit is contained in:
mhartington
2017-11-30 12:34:20 -05:00
parent 45ee0a9627
commit 55839e27d5
2 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/core/src/components/alert/alert.tsx
View File

@ -241,9 +241,10 @@ export class Alert {
}
buttonClass(button: AlertButton): CssClassMap {
let customClass = button.cssClass.split(' ').filter(b => b.trim() !== '').join(' ');
let buttonClass: string[] = !button.cssClass
? ['alert-button']
: [`alert-button`, `${button.cssClass}`];
? ['alert-button', customClass]
: [`alert-button`, `${button.cssClass}`, customClass];
return buttonClass.reduce((prevValue: any, cssClass: any) => {
prevValue[cssClass] = true;
@ -330,6 +331,13 @@ export class Alert {
const subHdrId = `${this.alertId}-sub-hdr`;
const msgId = `${this.alertId}-msg`;
if (this.cssClass) {
this.cssClass.split(' ').forEach(cssClass => {
if (cssClass.trim() !== '') this.el.classList.add(cssClass);
});
}
if (this.title || !this.subTitle) {
this.hdrId = hdrId;

19
packages/core/src/components/alert/test/basic/index.html
View File

@ -28,6 +28,7 @@
<ion-button expand="block" onclick="presentAlertPrompt()">Prompt</ion-button>
<ion-button expand="block" onclick="presentAlertRadio()">Radio</ion-button>
<ion-button expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
<ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
</ion-content>
</ion-page>
</ion-app>
@ -289,6 +290,24 @@
return await alert.present();
}
async function presentWithCssClass() {
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
cssClass: 'my-class my-customClass ',
message: 'This is an alert message.',
buttons: [ {
text: 'Ok',
cssClass: 'my-class my-customClass ',
handler: () => {
console.log('Confirm Ok')
}
}]
});
return await alert.present();
}
</script>
</body>