LiteAdminmenu

account_circle
John Doe


error_outlineNotification

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>


This is my very first notification!
This is my second notification!
This is a success notification!
This is a info notification!
This is a primary notification!
This is a warning notification!
This is a danger notification!
check
A nice title
I am a full notification! I have a title, a message icon and a close icon!