Need to set button side by side in ionic action sheet?

ionic-v1
1

I am developing Cordova mobile application using ionic framework.

I need something more in action sheet. I need 6 button in action sheet as you can see in image and all button should call separate function on ng-click.

so how can i achieve this?

image

2

For something like this, you might want to consider creating a custom component. Action sheet follows the ios/material design guidelines.

3

Thanks @mhartington For response

I had already arranged it. it is not possible to arrange six button in action sheet button, so i had arranged it in action sheet title by providing html string in title template including ng-click.

$scope.renderHtml = function(html) {
    return $sce.trustAsHtml(html);
  };

$scope.showActionSheet = function() {
      // Show the action sheet:
      $ionicActionSheet.show({
        buttons: [{
          text: 'More'
        }],
        titleText: $scope.renderHtml('<div class="row actionsheet-row"><div class="col text-center" ng-click="alert(123);"><span class="custom-actionsheet-icon ion-email"></span></div><div class="col text-center" ng-click="shareTwitter(card)"><span class="custom-actionsheet-icon ion-social-twitter"></span></div><div class="col text-center"><span class="custom-actionsheet-icon ion-social-facebook" ng-click="shareFacebook(card)"></span></div></div><div class="row actionsheet-row"><div class="col text-center" ng-click="shareText(card)"><span class="custom-actionsheet-icon ion-social-googleplus-outline"></span></div><div class="col text-center" ng-click="shareText(card)"><span class="custom-actionsheet-icon ion-social-linkedin"></span></div><div class="col text-center" ng-click="shareText(card)"><span class="custom-actionsheet-icon ion-social-pinterest"></span></div></div>'),
        cancelText: 'Cancel',
        cancel: function() {
          //alert("Clicked Cancel");
        },
        cssClass: 'customActionsheet',
        buttonClicked: function(index, buttonObj) {
             switch (index) {
               case 0:
                 //alert("Clicked Share");
                 return false;
               case 1:
                 //alert("Clicked More");
                 return false;
             }
            }
      });
     };

But ng-click is no triggering at all. have u any idea why it is not triggering

4

Again for something like this, you probably want to make your own custom component, one that does not use the actionsheet code. The way you have it setup currently is going to be problematic. It’s fighting against what actionsheet was designed to do :smile:

5

Thanks for reply, I will go for custom component :joy:

6

I did Try a way to made it in ionic, hope it can help this code in ionic version >= 5

in my global.scss file

// layout product action sheet
.bottom-action-sheet .action-sheet-group {
div.action-sheet-title {
font-size : 1rem;
text-transform: capitalize;
margin-bottom : 55px;
}

button {
    border: 1px solid var(--actions-background);
    border-radius: 9px;
    position: absolute;
    width: 44.5%;
    bottom: 10px;
    height: 48px;
    font-family: var(--fontfamilyBold) !important;
}

button>span.action-sheet-button-inner {
    color          : var(--actions-background);
    justify-content: center;
    font-size: .8rem;
}

button.left {
    left: 16px;
}

button.right {
    right: 16px;
}

}

in my example.ts file

// Show Sheet to remove or cancle
async doYouWantRemove(product) {
const actionSheet = await this.actionSheetController.create({
cssClass: ‘bottom-action-sheet’,
header: this.translate.instant(‘do_you_want_to_remove_it’),
buttons: [
{
text: this.translate.instant(‘Delete’),
role: ‘destructive’,
cssClass: ‘right’,
handler: () => {
this.removeProductsFromWishList(product.id);
}
},
{
text: this.translate.instant(‘cancel’),
cssClass: ‘left’,
handler: () => {
this.removeProductsFromWishList(product.id);
}
}]
});
await actionSheet.present();
}

my output

Screen Shot 1400-03-22 at 10.46.57
Screen Shot 1400-03-22 at 10.46.57594×1086 49.9 KB

thanks and hope be helpful