Ionic-framework: add slots and header to toast component

[zakton5]

Feature Request

Ionic version:


[x] 4.x

Describe the Feature Request
Toasts are great and all but they can't be highly customized in terms of layout. At the very least it would be great to have start and end slots similar to ion-item to present success or error messages and show a check or an x based on the type of message. In addition, these slots could house buttons that take different handlers similar to alert buttons. Why be limited to just a close button?

A header property would also be great for presenting in-app notifications to users such as

Message from Susan (header)
Hey how are you? (message)

Describe Preferred Solution

Add the following properties to ToastOptions: header, actionStart, actionEnd

this.toastCtrl.create({
    header: 'Message from Susan',
    message: 'Hey how are you?',
    actionStart: {
        text: '',
        handler: () => {
            //...
        }
    },
    actionEnd: {
        text: '',
        handler: () => {
            //...
        }
    }
})

Describe Alternatives
I'm not so sure actionStart and actionEnd are good names, but you get the idea!

[zakton5]

@paulstelzer I would interested in making a PR if the general idea above looks good to you

[brandyscarney]

We are holding off on merging in feature requests at the moment as we push to get bug fixes in and a final release out. If it were up to me though, I'd think the API would look more like this:

this.toastCtrl.create({
  header: 'Message from Susan',
  message: 'Hey how are you?',
  buttons: [{
    text: 'Confirm',
    icon: 'add',
    slot: 'start',
    handler: () => {
      //...
    }
  }, {
    icon: 'close',
    slot: 'end',
    handler: () => {
      //...
    }
  }]
})

This would match with the way we add buttons to action sheet, for example. However, I'm not sure if it's worth the effort at the moment to submit a PR for this, since we won't be able to review or merge it for a bit and I would need to discuss the API with other team members.

[zakton5]

@brandyscarney Looks better and even more flexible. I'll hold off until an update from you guys.

[zakton5]

@brandyscarney I've gotten to the point where I need this in my app so I'm going to attempt to create a PR unless you all have other plans

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.