Notification usage

The notifications browser support is very limited. Only Chrome, FireFox and Opera support it. These notifications are only working on pc / laptop. Maybe some day in the future push notifications can be added. In the mean time checkout the CSS styled notifications.

The notification function which is called in JavaScript takes 3 parameters ($title, $options, $click). The $title speaks for itself. The $click parameter is used to handle click events on the notification. For the $options I would advice you to take a look here. But here is a list of supported options:

  • body (Notification content)
  • icon (Notification icon)
  • dir (Is used for text direction eg: ltr (left to right), rtl (right to left), auto (adapts to browser settings))
  • lang (Is used for language eg: 'en-US')
	    
notification('Title', {body: 'Content', icon: 'icon_path'}, 'click-url.com')
	    
    

Notifications

There are a couple of different notification templates to choose from. The templates you can choose from are standard, big text, big picture, progress and media. All the templates are inspired on the new Android (N) Nougat.

The additional classes for each template are not only for styling. In the future the classes will also make sure the appropriate actions are taking place in JavaScript.

Standard notification

According to the documentation the header text and timestamp are optional.

message
Messenger
johndoe@gmail.com
14:29
expand_more
John Doe
This is an example message

To create the most basic notification you simply need the following code. The .separator is to add the bullet. To give the app icon, the app name and expand a other color you can add a text color class. For example .red-text makes the text red. More information about this can be found in colors.

		
<div class="notification">
  <div class="notification-header">
    <div class="notification-header-app-icon"><i class="material-icons">message</i></div>
    <div class="notification-header-app-name separator">Messenger</div>
    <div class="notification-header-text separator">johndoe@gmail.com</div>
    <div class="notification-header-timestamp">2 min</div>
    <div class="notification-header-expand"><i class="material-icons">expand_more</i></div>
  </div>

  <div class="notification-content">
    <div class="notification-content-title">John Doe</div>
    <div class="notification-content-text">This is an example message</div>
  </div>

  <div class="notification-actions">
    <button class="flat-button">Reply</button>
    <button class="flat-button">Archive</button>
  </div>
</div>
		
	

If you would like to add an profile image you need to add the .standard class. This class makes sure that you get the standard template. You can now also add a <img> tag to notification content.

message
Messenger
johndoe@gmail.com
14:29
expand_more
John Doe
This is an example message

Big text notification

If you would like to use the big text template you simply need to add the .big-text class to the notification. To get the subject typography add the .subject class to the notification content.

mail
Gmail
14:29
expand_more
John Doe
This is an example message
This is an example message. This message could contain a hole lot of text.
		
<div class="notification big-text">
  <div class="notification-header">
    <div class="notification-header-app-icon red-text"><i class="material-icons">mail</i></div>
    <div class="notification-header-app-name red-text separator">Gmail</div>
    <div class="notification-header-timestamp">12:00</div>
    <div class="notification-header-expand red-text"><i class="material-icons">expand_more</i></div>
  </div>

  <div class="notification-content">
    <div class="notification-content-title">John Doe</div>
    <div class="subject">This is an example message</div>
    <img src="/images/profile-icon.jpg">
    <div class="notification-content-text">This is an example message. This message could contain a hole lot of text.</div>
</div>

  <div class="notification-actions">
    <button class="flat-button">Reply</button>
    <button class="flat-button">Archive</button>
  </div>
</div>
		
	

Big picture notification

If you want to use the big picture notification you need to add the .big-picture class to your notification. You can also add a tag in both the notification content and text.

image
Android System
14:29
expand_more
Screenshot captured
		
<div class="notification big-picture">
  <div class="notification-header">
    <div class="notification-header-app-icon blue-text"><i class="material-icons">image</i></div>
    <div class="notification-header-app-name blue-text separator">Android System</div>
    <div class="notification-header-timestamp">12:00</div>
    <div class="notification-header-expand blue-text"><i class="material-icons">expand_more</i></div>
  </div>

  <div class="notification-content">
    <div class="notification-content-title">Screenshot captured</div>
    <img src="/images/profile-icon.jpg">
    <div class="notification-content-text"><img src="/images/profile-icon.jpg"></div>
  </div>

  <div class="notification-actions">
    <button class="flat-button">Share</button>
    <button class="flat-button">Delete</button>
  </div>
</div>
		
	

Progress notification

To get the template for the progress notification simply add the .progress to the notification. You can find a different progressbar here.

file_download
Download manager
68%
expand_more
App name
2 seconds left
		
<div class="notification progress">
  <div class="notification-header">
    <div class="notification-header-app-icon blue-text"><i class="material-icons">file_download</i></div>
    <div class="notification-header-app-name blue-text separator">Download manager</div>
    <div class="notification-header-timestamp">68%</div>
    <div class="notification-header-expand blue-text"><i class="material-icons">expand_more</i></div>
  </div>

  <div class="notification-content">
    <div class="notification-content-title">App name</div>
    <div class="notification-content-text">2 seconds left</div>

    <div class="determinate">
      <div class="progressbar" style="width:68%"></div>
    </div>
  </div>

  <div class="notification-actions">
    <button class="flat-button">Cancel</button>
  </div>
</div>
		
	

Media notification

If you would like to use the media template you can add the .media class to your notification. Inside the notification content you can add a div with the class .actions. Inside the actions can be a couple of actions. When the notification is condensed there is room for 3 actions. When the notification is expanded there is room for 5 to 6 although for now the styling supports 5 actions.

music_note
Google Play Music
Greatest Hits
expand_more
We Will Rock You
Queen
thumb_down skip_previous play_arrow skip_next thumb_up

Settings

Variable Options Result
$notification-background Color / variable Changes the notification background

Resources