extraContentAction() {
let actionSheet = this.actionSheetCtrl.create({
buttons: [
{
text: 'Summary',
handler: () => {
console.log('All modules selected');
}
},
{
text: 'Content',
handler: () => {
console.log('completed module selected');
this.navCtrl.push(ContentPage, {
});
}
},
{
text: 'Questions',
handler: () => {
console.log('Current module selected');
}
},
{
text: 'Review',
handler: () => {
console.log('Current module selected');
}
},
{
text: 'Resources',
handler: () => {
console.log('Current module selected');
}
},
{
text: 'Evaluate',
handler: () => {
console.log('Current module selected');
this.navCtrl.push(EvaluationPage, {
});
}
},
{
text: 'Exit',
role: 'cancel',
cssClass: 'ModuleActionClass',
handler: () => {
console.log('apply the changes');
}
}
]
});
actionSheet.present();
}
There is no general property for this! However, just like you did for your last button you can add a custom cssClass to the buttons that should be disabled to style it like a disabled button.
Then either disable the user input directly or add an early return; to your handler of the disabled button!
2 Likes
as @saimon said, we can use cssClass property of handler() to assign some custom class.
/*
|----------------------------------
| SHOWING ACTION SHEET
|----------------------------------
*/
showActions(){
const item = {status: 'pending' };
const actionSheet = this.showActionSheet(item);
actionSheet.then(sheet => {
sheet.present();
sheet.onDidDismiss().then((response:any) => {
console.log("Handle Action Sheet Response Here.");
});
});
}
/*
|----------------------
| Getting Action Sheet
|-----------------------
*/
async showActionSheet(item?: any) {
const buttons = [ 'Edit' , 'Delete', 'Pending' , 'Draft' , 'Publish' , 'Cancel']
const actionSheet$ = await this.actionSheetCtrl.create({
header: 'CleverHub',
buttons: [
{
text : buttons[0],
cssClass : this.cssClassForButton(item, buttons[0]),
handler: () => {
actionSheet$.dismiss({action: buttons[0]}).catch(() => {});
return false;
}
},
{
text : buttons[1],
cssClass : this.cssClassForButton(item, buttons[1]),
handler: () => {
actionSheet$.dismiss({action: buttons[1]}).catch(() => {});
return false;
}
},
{
text : buttons[2],
cssClass : this.cssClassForButton(item, buttons[2]),
handler: () => {
actionSheet$.dismiss({action: buttons[2]}).catch(() => {});
return false;
}
},
{
text : buttons[3],
cssClass : this.cssClassForButton(item, buttons[3]),
handler: () => {
actionSheet$.dismiss({action: buttons[3]}).catch(() => {});
return false;
}
},
{
text : buttons[4],
cssClass : this.cssClassForButton(item, buttons[4]),
handler: () => {
actionSheet$.dismiss({action: buttons[4]}).catch(() => {});
return false;
}
},
{
text: buttons[5],
role: 'cancel',
handler: () => {
actionSheet$.dismiss({action: buttons[5]}).catch(() => {});
return false;
}
}
]
});
return actionSheet$;
}
/*
|----------------------------------------------
| GETTING CSS CLASS FOR ACTION-SHEET BUTTONS
|----------------------------------------------
*/
cssClassForButton(item, buttonText): string {
let cssClass = '';
const status = item.status.toLowerCase();
if(status === 'pending' && ( buttonText === 'Edit' || buttonText === 'Pending'))
cssClass = 'disable-action-sheet-btns';
else if(status === 'draft' && ( buttonText === 'Edit' || buttonText === 'Draft'))
cssClass = 'disable-action-sheet-btns';
else if(status === 'publish' && ( buttonText === 'Publish'))
cssClass = 'disable-action-sheet-btns';
return cssClass;
}
and css is like this:
.disable-action-sheet-btns {
cursor: not-allowed;
background-color: rgb(229, 229, 229) !important;
}
.disable-action-sheet-btns > * { pointer-events:none; }