Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add slots and header to toast component #16791

Closed
zakton5 opened this issue Dec 17, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@zakton5
Copy link
Contributor

commented Dec 17, 2018

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

This comment has been minimized.

Copy link
Contributor Author

commented Dec 18, 2018

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

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Dec 18, 2018

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

This comment has been minimized.

Copy link
Contributor Author

commented Dec 18, 2018

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

@zakton5

This comment has been minimized.

Copy link
Contributor Author

commented Jan 17, 2019

@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

This comment has been minimized.

Copy link

commented May 11, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 11, 2019

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

feat(toast): add header and additional custom toast buttons (ionic-te…
…am#17147)

Adds a `header` and `buttons` property to toast. This allows for a toast header to be passed and multiple buttons including action buttons and icon only buttons which matches the Material Design spec. Adds hover states to the button to match the spec. Updates usage section to recommend the new way of passing a close button using the buttons array and `cancel` role. If a button is passed using the cancel role default the color to match the spec. Buttons will default to the `end` side but have the option of being placed on the `start` side.

Co-authored-by: Simon Hänisch <simonhaenisch@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>

closes ionic-team#16791 closes ionic-team#16237 closes ionic-team#17611
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.