Is it possibile to "slice" a Modal?

Hi, i’m trying to make something like the image shown below.

The “pop-up” is swipable and all three elements closes toghether

I tried with Modals but i think i cannot call 3 different modals at the same time or “slice” a modal in three pieces showing different content.

Another option could be using multipleToasts but i can’t put HTML (images, link ecc) into a toast and, afterall, this isn’t the purpose of this kind of Ionic Component.

So, any ideas?
Any kind of help is very appreciated

one modal with transparent background… the layer the components on top?

1 Like

Don’t know if i understood what you mean. Into a modal i can show a page but i can’t slice it in three piecese, i can only make it smaller or bigger. And anyway i cant show components on top of the modal, i think i could call three little modals but they will be indipendent eachother and i can’t swipe down to close all three togheter.

Trying to convence the designer that isn’t really necessary divided that options? Could be perfectly a modal with swipe to close.

Sure, but if i want to implement that?

I also thought about action-sheet but, in this case, i cannot put any kind of HTML into the buttons so it’s not the right component for my needs

This really isn’t a ‘modal’ component, but rather a bottom draw component. We had some plans for this that sadly didn’t make it to v5, but hoping to ship it soon.

1 Like

This is about 10 minutes of hacking… I believe if you use the new ionic animations you can fake it using the out of the box modal functionality… otherwise it is a slide in pane and if you google it there are npm libraries that can support this

1 Like

if you don’t mind could you share code ?

2 Likes

Thank you very much, this example is self-explanatory! I’ve managed to achieve what i was looking for :slight_smile:

Glad it worked out for you

1 Like

Hi. You can also using drawer with draggableOver option and transparent background.