-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
Comments
@paulstelzer I would interested in making a PR if the general idea above looks good to you |
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. |
@brandyscarney Looks better and even more flexible. I'll hold off until an update from you guys. |
@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 |
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. |
…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
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
andend
slots similar toion-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 asDescribe Preferred Solution
Add the following properties to
ToastOptions
:header
,actionStart
,actionEnd
Describe Alternatives
I'm not so sure
actionStart
andactionEnd
are good names, but you get the idea!The text was updated successfully, but these errors were encountered: