--- name: notification url: /notification title: Notification ---

Notification

An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be assigned to a notification as well.

Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.

Dynamic Notification Static Notification
This notification is static, it works similarly to a programmatic with some subtle differences

There are two ways to access a notification. One via the static method and also dynamically (programmatic).

Basic HTML

The static method is best used for prototyping since it doesn't involve any programming.

You can create a Static Notification with this basic HTML:

Static Notification

This notification is static, it works similarly to a programmatic with some subtle differences.

Static Notification

This notification is static, it works similarly to a programmatic with some subtle differences.

Advanced HTML

The Foundation Api service is pretty useful, one function of it is to send information from directives, controllers, and other parts to other directives, controllers, etc. It's a messaging system for the entire application.

You can create a Dynamic Notification with this basic HTML:

Dynamic Notification
Dynamic Notification

And then send it a notification with via FoundationApi:

foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });

You can also use the `zf-notify` directive for simpler messages and prototyping:

Launch notification

Additional Options

On top of setting a title and content, you can also set:


Sass Mixins

Use our mixins to create custom notification styles.

.custom-notification { // Extend the base selector to get core styles @extend %notification; // Use the layout mixin to position and structure the notification @include notification-layout( $x: left, // Can be left, middle, or right $y: top, // Can be top or bottom $size: 200px, // Width of notification $offset: 1rem // Offset from the edge of the window ); // Use the style mixin to style the notification @include notification-layout( $background: #fff, // Background color $color: #000, // Text color $padding: 1rem, $radius: 4px ); .custom-notification-icon { @include notification-icon( $size: 50px, // Width and height of the icon $margin: 1rem, // Right-hand margin $align: top // Can be top, middle, or bottom ); } }

Sass Variables

You can customize notifications with these Sass variables:

$notification-default-position: right top; $notification-width: rem-calc(400); $notification-offset: $global-padding; $notification-background: $primary-color; $notification-color: white; $notification-padding: $global-padding; $notification-radius: 4px; $notification-icon-size: 60px; $notification-icon-margin: $global-padding; $notification-icon-align: top;