feat: ion-alert add a slot for full customization

[fanckush]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I would like to replicate this loading alert that you get when sharing a video from the photos app.

however currently, there are no slots to alert so this is not possible

Describe the Use Case

one use case is to add icons like in this closed issue https://github.com/ionic-team/ionic-framework/issues/7874

Describe Preferred Solution

using a default slot is probably the most flexible solution, then the user can have whatever they want inside such as Ion-icon and animated stuff

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[dev-charles15531]

HTML can be passed to the message prop of the ion-alert. From the docs: innerHTMLTemplatesEnabled must be set to true in the Ionic config before custom HTML can be used. And for security reasons, your custom HTML are sanitized as well.

see: https://ionicframework.com/docs/api/alert#message

<ion-button id="present-alert">Click Me</ion-button>

<ion-alert
  trigger="present-alert"
  header="A Short Title Is Best"
  sub-header="A Sub Header Is Optional"
  message="`
    <div class='my-class'>
      <h2> I am a boy </h2>
      <img src='https://unsplash.it/600/400?image=501' />
    </div>
  `"
  :buttons="alertButtons"
>
</ion-alert>

I probably don't understand what you plan to achieve, but to achieve full flexibility where you can have whatever you "want inside such as Ion-icon and animated stuff", why don't you consider using a modal?

[fanckush]

thanks! I didn't know you could pass HTML like that. It's not ideal of course because it's static and harder to interact with.

my goal it pretty much get that same loading animation as in the screenshot I posted

[dev-charles15531]

You can achieve that with a modal.

[fanckush]

yes, i'm aware of that, and that's what I ended up doing, but it was painful from the sizing, to the animation.

[sean-perkins]

With the recent feature addition of inline overlays in Ionic Framework, we should consider adding new slots to the element so developers can better customize the contents of the alert to their needs.

There will still limitations that the alerts are designed to match iOS/MD design guidelines, but the contents inside could be customized with an API that doesn't require passing HTML as a string.

If you do pass HTML as a string, make sure to pass it through a DOM sanitizer or similar to protect your application from javascript injection.

[oliveryasuna]

+1 for adding a slot

[TiBz0u]

I found this feature request. Indeed, a way to add an icon or an image would be appreciate. At my side, it was more on top on the alert (see below).