md-snackbar (toast) #115

Closed
jelbourn opened this Issue Feb 27, 2016 · 13 comments

Projects

None yet

8 participants

@jelbourn jelbourn added the feature label Feb 27, 2016
@jelbourn jelbourn added this to the before beta milestone Feb 27, 2016
@jelbourn jelbourn changed the title from mdToast to md-toast Feb 27, 2016
@iveysaur iveysaur was assigned by jelbourn May 11, 2016
@jelbourn jelbourn changed the title from md-toast to md-snackbar (toast) Sep 1, 2016
@jelbourn jelbourn assigned josephperrott and unassigned iveysaur Sep 1, 2016
@jelbourn
Member
jelbourn commented Sep 2, 2016

Status update:
Design doc
Proof of concept

@jelbourn
Member

Closing this since we have an initial version

@jelbourn jelbourn closed this Oct 20, 2016
@AlvaroOrduna

As Material Design specification says, a SnackBar may or may not have an action. There any way to add a SnackBar without any action for now?

@angular/material 2.0.0.alpha.9-3

@jammerware

@AlvaroOrduna I was able to add an actionless SnackBar by passing null as the actionLabel argument to snackBar.open.

@mhmo91
mhmo91 commented Nov 30, 2016

Duration doesn't work with me, it doesn't even exist in the config class
i'm using version "@angular/material": "^2.0.0-alpha.10",
Also, how about the color of the toaster? like danger, warning, success... thankss

@jammerware

@mhmo91 I don't think build with the duration property has been pushed to the npm feed yet. The commit in question was only made just under a couple of weeks ago.

@cheresier
cheresier commented Dec 15, 2016 edited

I have a suspicion that the viewContainerRef setting of MdSnackBarConfig is not working correctly. I have a component (let's call it CompanyComponent) that consists of one MdCard with a button inside of it. Pressing the button opens an MdSnackBar. Since each card has a button that opens a snack bar I want the snack bar to be anchored to the bottom of each card. Multiple instances of the CompanyComponent appear in the parent, AppComponent. I open the snack bar using the following code:

    @ViewChild(MdCard, { read: ViewContainerRef }) card;    
    showSnackbar() {
        this.snackbar.open('UPDATED', '', { viewContainerRef: this.card });
    }

I confirmed in the debugger that this.card is defined and assigned a correct ViewContainerRef object.

Once again, I am trying to open the snack bar at the bottom of each card. However, the snack bar opens at the bottom of the browser view port instead (in the AppComponent, not attached to any individual instance of CompanyComponent or MdCard inside of it). Am I doing something wrong, or does there seem a to be a bug?

@jelbourn
Member

@cheresier That's not what viewContainer is for. Setting the viewContainer tells Angular where the loaded component lives in terms of dependency injection and change detection, but does not affect where it is rendered. Per material design spec, the snack bar always renders at the edge of the screen.

@cheresier

@jelbourn, a-ha! Got it. Thank you! Can you point to any other material component I should be using for this use case?

@jelbourn
Member

You may just want make your own component and conditionally show/hide it at the bottom of the card.

@kuncevic
Contributor
kuncevic commented Jan 3, 2017 edited

How would you control the position of the snackbar? I can see in the sample it is appearing just in the bottom. How would you display it in the right top corner ? And also how would you stack the multipe snackbars appearing on the screen?

@jammerware

@kuncevic See this comment above. I don't think the position of the snackbar is exposed to the end developer because the material spec doesn't allow it.

@kuncevic
Contributor
kuncevic commented Jan 3, 2017 edited

Just went thorugh this https://material.io/guidelines/components/snackbars-toasts.html

Only one snackbar may be displayed at a time.

Snackbars animate upwards from the bottom edge of the screen.

So what I was asking for above is actually against the material spec. @jesselpalmer thanks for pointing that out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment