CODEWITHSUNDEEP
ionic-frameworkionic2
Al-shimaa Adel
Al-shimaa Adel

Reputation: 777

ionic2: how to use action sheet in ionic2

enter image description here

I want to make page as in image, I'm using Action sheet but I can't find resources to design action sheet like that, this is the code I used:

  sharePost() {
let actionSheet = this.actionSheetCtrl.create({
 title: 'Modify your album',
 buttons: [
   {
     text: 'Destructive',
     role: 'destructive',
     handler: () => {
       console.log('Destructive clicked');
     }
   },
   {
     text: 'Archive',
     handler: () => {
       console.log('Archive clicked');
     }
   },
   {
     text: 'Cancel',
     role: 'cancel',
     handler: () => {
       console.log('Cancel clicked');
     }
   }
 ]
 });

 actionSheet.present();

}

and this is the output image: the output actionsheet

what should I do to customize my action sheet and If i shouldn't use action sheet what should I use?

Upvotes: 1

Views: 436

Answers (2)

codeMonkey
codeMonkey

Reputation: 146

what you try to achieve is may be bottom-sheet.

Action-sheets are native so we can't change their design.

but here are some workarounds. check these examples,

codepen.io/jabas06/pen/vOMxjK

forum.ionicframework.com/t/an-alternative-to-md-bottom-sheet-in-ionic-2/93957/2

(links are plain text because of reputation 😁 )

ionic market plugin

Upvotes: 1

Anil
Anil

Reputation: 996

i believe you want to use share feature

actually it has nothing to do with design.

1st image only share the available apps to share from your platform.

Now to achieve this you need to use the below plugin

https://ionicframework.com/docs/native/social-sharing/

and onclick call this instance member https://ionicframework.com/docs/native/social-sharing/#share

this is share anywhere link

so your code will be like

share(){
 this.socialSharing.share(message, subject, file, url).then(() => {
   // Sharing via email is possible
 }).catch(() => {
   // Sharing via email is not possible
});
}

Upvotes: 1

Related Questions