Create a show more option on click in my app

Ionic Framework ionic-v3
1

I want to create a show more option in my app
I tried it with playing position absolute with lists and all
but didnt work anything
I am attaching images what m trying to achieve .

IMG-20190109-WA0001%5B1%5D
IMG-20190109-WA0001[1].jpg292×1280 11.6 KB

IMG-20190109-WA0000%5B1%5D
IMG-20190109-WA0000[1].jpg947×1280 62.8 KB

any help any reference guys?

2

use popover https://ionicframework.com/docs/api/components/popover/PopoverController/

3

Use modal and add a custom css :slight_smile:
I made an example for you:

“more”
modal

when you click it, it looks like this:
modal2

in your ts-file:

async openModal() {
    console.log("modal clicked");

    const modal = await this.modalController.create({
      component: ModalPage,
       cssClass: 'custom-modal-css'
       enterAnimation: youCanAddYourOwnAnimationHere
    });
    return await modal.present(); 
  }

in your global.scss/app.scss

.custom-modal-css .modal-wrapper {
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 60%; 
    height: 50%; 
    box-shadow: 0 4px 8px 0 #3b3b3b33, 0 6px 20px 0 #3b3b3b33;
    
}

You can also add an animation class to your modal. Modal by standard slides upward a little when they are opened, maybe you would like something different. I think you can find some tutorial :slight_smile:

All the best

4

Thank you Its great .Ty for example to make it more clear:slightly_smiling_face:

1 Like
5

Thankyou …great to know something ionic has is own for this