Feature Request: Alerts and Messages

[nh916]

I noticed that materialize currently doesn't provide alerts or messages for users like other css frameworks currently do.

https://getbootstrap.com/docs/4.0/components/alerts/ https://bulma.io/documentation/components/message/

This is something I really wish could be added to Materialize because every time a user saves something I want to be able to give them a quick and nice alert about what the effect of their action was, whether it was success, error, or just info but I currently am now able to do that

[wuda-io]

Maybe as a temporary solution, you might use a card-panel with a color. But there is no close button then. Also what i can recommend for notifications is the toast component. Have you tried using them?

[ChildishGiant]

Is this in the material specs? I think we generally try to stick to them. +1 to the suggestion of using toasts if you want to notify the user of something.

[nh916]

toasts have bad ux because on desktop they often appear in the right which is out of users field of vision and they can miss it easily. Also, there is no colors with toasts like green that immediately says SUCCESS or red that says ERROR.

I think it is good for version 1.0 but I think as we go forward it might be something that we will want to add in to make materialize even better!

[wuda-io]

I like your Engagement. For toast colors you can use the classes from the color page for example "green" and "red" classes. I also use colors for the toasts so this works very well.

I am confident that we release a new version soon. The first steps are done by having a hosted page 👍 next steps would be merging open PRs and then releasing first new version and also go through and test the full processes.

[Smankusors]

toasts have bad ux because on desktop they often appear in the right which is out of users field of vision and they can miss it easily. Also, there is no colors with toasts like green that immediately says SUCCESS or red that says ERROR.

just as supplement to @wuda-io comment

M.toast({html: 'I am a toast!'}) M.toast({html: 'I am a toast!', classes: 'green'});

this code will show the green toast.

[veeshi]

I use a dismissable modal with a background colour and no footer to prompt users and auto dismiss after a certain amount of seconds if needed.

[nh916]

I think these are nice work arounds but as we go forward, we might want to consider adding alerts to our framework as other frameworks have. If we still want to use toasts or modals after that it's fine, but I think nice and good alerts are needed for every css framework

[DanielRuf]

So it looks like we can duplicate the modal component and adjust this? Is this sufficient? Would you be interested to create the first steps for such an implementation @veeshi?

[veeshi]

Apologies I've not had much time lately but below is a minimal example:

<div class="modal alert red white-text">
  <div class="modal-content center-align">
    <h3>Alert Body</h3>
    <p class="flow-text">abc...</p>
  </div>
</div>
<script type="text/javascript">
  var element = document.querySelector(".alert");
  var instance = M.Modal.init(element, {});

  instance.open();
  setTimeout(() => {instance.close()}, 5000);
</script>

[LoganTann]

Vuetify have an alert component so we may work on it for v2 https://vuetifyjs.com/en/components/alerts/#border