Basics
To create nice notifications, you need:
- One toggle to make all notifications start hidden, without animation;
- One toggle to hide any notification with an animation;
- One toggle to control each notification.
Heres the basic code:
<!-- This input makes all notifications start hidden -->
<input type="radio" name="notification-toggle" class="notification-toggle notification-start-hidden" checked>
<!-- This input hides any notification when the users clicks on dismiss -->
<input type="radio" name="notification-toggle" class="notification-toggle" id="no-notification">
<!-- This input controls the status of the next notification -->
<input type="radio" name="notification-toggle" class="notification-toggle" id="first-notification-toggle">
<div class="notification">
<label for="no-notification" class="notification-dismiss">Got it!</label>
This is my very first notification!
</div>
<!-- This input controls the status of the next notification -->
<input type="radio" name="notification-toggle" class="notification-toggle" id="second-notification-toggle">
<div class="notification">
<label for="no-notification" class="notification-dismiss">Got it!</label>
This is my second notification!
</div>
<!-- Lets create the notification triggers -->
<label class="btn-primary" for="first-notification-toggle">First notification</label>
<label class="btn-success" for="second-notification-toggle">Second notification</label>Try it:
Color
You can choose the color by adding the class notification-success, notification-info, notification-primary, notification-warning, notification-danger to the notification div.
Try it:
Title and icons
Add a title and icons to make it even cooler!
<div class="notification notification-success">
<label for="no-notification" class="notification-dismiss material-icons">close</label>
<div class="notification-icon material-icons">check</label>
<div class="notification-title">A nice title</label>
I am a full notification! I have a title, a message icon and a close icon!
</div>