Materialize: Materialize Alerts

[ghost]

Bootstrap has, why we can't?

Example in W3Schools:

[cofcoder]

Because Material Design by Google does not include this in their design specs and it utilises the toast notification bar and cards as a way to well notify the user of their actions. Can I ask what you need the alert messages for?

[ghost]

To show operations, like:

• You were registered successfully!
• Your password might be stronger
• There's already and username registered like this one!
  Thinks like that

[cofcoder]

Have you checked out http://t4t5.github.io/sweetalert/ for notifications, as the name says sweet alerts. I use it and it's really great, I have even had feedback from clients saying that their users love the alerts. Maybe give it a try and see if it works for you.

[ghost]

Ohh amazing, I'm gonna try this one!
Thanks for the help and your time!

[cofcoder]

It's an absolute pleasure. That's what we are all here for. Hope it works out for what you need it for?

[ghost]

I found this:
https://www.google.com/design/spec/components/dialogs.html#dialogs-alerts

[Dogfalo]

You can accomplish this by using our modal.

On Sun, Nov 29, 2015 at 6:09 PM, Gabriel Caruso [email protected]
wrote:

I found this:
https://www.google.com/design/spec/components/dialogs.html#dialogs-alerts

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/2340#issuecomment-160497842
.

Doggy sends his greetings from Mars.

[cofcoder]

I didn't see that the last time I checked the documents.

[khlJunior]

If you use Toast you can reach something similar to alerts, but if you want a confirm box, modals can be used or jquery-confirm can do this.
http://craftpip.github.io/jquery-confirm/

I'm using jquery-confirm in a project, no issues with materialize. Just need a workaround the ESC escape key when modal and jconfirm are being used at same time. :)

[ghost]

I agree with all of you, but for what do I need, I'll just copy the Boostrap CSS code, and chance some font and colour!
Thanks for all helps :smile:

[hsali]

@tmd-uk the dialogues mentioned in the Google specification are not mentioned in the materializecss. Why don't you provide in your materializecss documentation? So that, It will be easy for the developer to use those snippets. You guys are working wonderfully. first, I started to use getmdl.io, but I found difficult to use. MaterializeCSS is more user-friendly and innovative.

I have to give time to develop these dialogues using model. If you provide these in the documentation it will be very helpful.
Thanks. once again.

[loginov-rocks]

For those, who got here from Google: you can use .card-panel with color combinations to achieve Bootstrap-like alerts styling.

<div class="card-panel green lighten-4 green-text text-darken-4"><b>Success!</b> This alert box indicates a successful or positive action.</div>
<div class="card-panel blue lighten-4 blue-text text-darken-4"><b>Info!</b> This alert box indicates a neutral informative change or action.</div>
<div class="card-panel yellow lighten-4 yellow-text text-darken-4"><b>Warning!</b> This alert box indicates a warning that might need attention.</div>
<div class="card-panel red lighten-4 red-text text-darken-4"><b>Danger!</b> This alert box indicates a dangerous or potentially negative action.</div>

Or we can simplify it with a pinch of SCSS...

<div class="alert">The simplest alert.</div>
<div class="alert alert-success"><b>Success!</b> This alert box indicates a successful or positive action.</div>
<div class="alert alert-info"><b>Info!</b> This alert box indicates a neutral informative change or action.</div>
<div class="alert alert-warning"><b>Warning!</b> This alert box indicates a warning that might need attention.</div>
<div class="alert alert-danger"><b>Danger!</b> This alert box indicates a dangerous or potentially negative action.</div>

.alert {
    @extend .card-panel, .lighten-4, .text-darken-4;

    &.alert-success {
        @extend .green, .green-text;
    }

    &.alert-info {
        @extend .blue, .blue-text;
    }

    &.alert-warning {
        @extend .yellow, .yellow-text;
    }

    &.alert-danger {
        @extend .red, .red-text;
    }

    .close {
        position: absolute;
        top: 50%;
        right: 0.5rem;

        color: inherit;
        margin-top: -18px;
    }
}

...and add a dismiss button with JS:

$('.alert').append('<button class="waves-effect btn-flat close"><i class="material-icons">close</i></button>');

$('body').on('click', '.alert .close', function() {
    $(this).parent().fadeOut(300, function() {
        $(this).remove();
    });
});

[Danielix99]

how can i add sweetalert to my page without materialize interfer with the input created by swal?

[iamdaya]

I agree with @hsali in that the guidelines are only effective if some utilities are provided to accomplish them, if each developer has to write their own utilities then ....