Notification

With Notification component you can show required messages that looks like Push (or Local) system notifications.

Notification App Methods

Let’s look at related App methods to work with Notification:

app.notification.create(parameters)- create Notification instance

• parameters - object. Object with notification parameters

Method returns created Notification’s instance

app.notification.destroy(el)- destroy Notification instance

• el - HTMLElement or string (with CSS Selector) or object. Notification element or Notification instance to destroy.

app.notification.get(el)- get Notification instance by HTML element

• el - HTMLElement or string (with CSS Selector). Notification element.

Method returns Notification’s instance

app.notification.open(el, animate)- opens Notification

• el - HTMLElement or string (with CSS Selector). Notification element to open.
• animate - boolean. Open Notification with animation.

Method returns Notification’s instance

app.notification.close(el, animate)- closes Notification

• el - HTMLElement or string (with CSS Selector). Notification element to close.
• animate - boolean. Close Notification with animation.

Method returns Notification’s instance

Notification Parameters

Now let’s look at list of available parameters we need to create Notification:

var notification = app.notification.create({
  title: ‘John Doe’,
  text: ‘Hello, how are you?’,
  on: {
    opened: function () {
      console.log(‘Notification opened’)
    }
  }
})

Note that all following parameters can be used in global app parameters under notification property to set defaults for all notifications. For example:

var app = new Framework7({
  notification: {
    title: 'My App',
    closeTimeout: 3000,
  }
});

Notification Methods & Properties

So to create Notification we have to call:

var notification = app.notification.create({ /* parameters */ })

After that we have its initialized instance (like notification variable in example above) with useful methods and properties:

Notification Events

Notification will fire the following DOM events on notification element and events on app and notification instance:

DOM Events

App and Notification Instance Events

Notification instance emits events on both self instance and app instance. App instance events has same names prefixed with notification.

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-notification-max-width: 568px;
  --f7-notification-subtitle-text-transform: none;
  --f7-notification-subtitle-line-height: 1.35;
  --f7-notification-text-text-transform: none;
  --f7-notification-text-font-weight: 400;
}
:root .theme-dark,
:root.theme-dark {
  --f7-notification-subtitle-color: #fff;
}
.ios {
  --f7-notification-margin: 8px;
  --f7-notification-padding: 10px;
  --f7-notification-border-radius: 12px;
  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  --f7-notification-icon-size: 20px;
  --f7-notification-title-font-size: 13px;
  --f7-notification-title-text-transform: uppercase;
  --f7-notification-title-line-height: 1.4;
  --f7-notification-title-font-weight: 400;
  --f7-notification-title-letter-spacing: 0.02em;
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-font-size: 15px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 15px;
  --f7-notification-text-line-height: 1.2;
  --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
  --f7-notification-bg-color-rgb: 255, 255, 255;
  --f7-notification-title-color: #000;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
  --f7-notification-subtitle-color: #000;
  --f7-notification-text-color: #000;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
  --f7-notification-bg-color-rgb: 30, 30, 30;
  --f7-notification-title-color: #fff;
  --f7-notification-text-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-notification-margin: 0px;
  --f7-notification-padding: 16px;
  --f7-notification-border-radius: 0px;
  --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-notification-icon-size: 16px;
  --f7-notification-title-color: var(--f7-theme-color);
  --f7-notification-title-font-size: 12px;
  --f7-notification-title-text-transform: none;
  --f7-notification-title-line-height: 1;
  --f7-notification-title-font-weight: 400;
  --f7-notification-title-right-font-size: 12px;
  --f7-notification-subtitle-font-size: 14px;
  --f7-notification-subtitle-font-weight: 400;
  --f7-notification-text-font-size: 14px;
  --f7-notification-text-line-height: 1.35;
  --f7-notification-bg-color: #fff;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.54);
  --f7-notification-subtitle-color: #212121;
  --f7-notification-text-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
  --f7-notification-bg-color: #242424;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
  --f7-notification-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-notification-margin: 10px;
  --f7-notification-padding: 10px;
  --f7-notification-border-radius: 4px;
  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  --f7-notification-icon-size: 18px;
  --f7-notification-title-font-size: 13px;
  --f7-notification-title-text-transform: uppercase;
  --f7-notification-title-line-height: 1.4;
  --f7-notification-title-font-weight: 500;
  --f7-notification-title-letter-spacing: 0.02em;
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-font-size: 12px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 12px;
  --f7-notification-text-line-height: 1.2;
  --f7-notification-bg-color: #fff;
  --f7-notification-title-color: #000;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
  --f7-notification-subtitle-color: #000;
  --f7-notification-text-color: #000;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-notification-bg-color: #242424;
  --f7-notification-title-color: #fff;
  --f7-notification-text-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
}

Examples

<div class="block">
  <p>
    <a class="button button-raised open-full" href="#">Full-layout notification</a>
  </p>
  <p>
    <a class="button button-raised open-with-button" href="#">With close button</a>
  </p>
  <p>
    <a class="button button-raised open-click-to-close" href="#">Click to close</a>
  </p>
  <p>
    <a class="button button-raised open-callback-on-close" href="#">Callback on close</a>
  </p>
</div>

var app = new Framework7();
var $$ = Dom7;
// Create full-layout notification
var notificationFull = app.notification.create({
  icon: '<i class="icon demo-icon">7</i>',
  title: 'Framework7',
  titleRightText: 'now',
  subtitle: 'This is a subtitle',
  text: 'This is a simple notification message',
  closeTimeout: 3000,
});
// Create notification with close button
var notificationWithButton = app.notification.create({
  icon: '<i class="icon demo-icon">7</i>',
  title: 'Framework7',
  subtitle: 'Notification with close button',
  text: 'Click (x) button to close me',
  closeButton: true,
});
// Create notification with click to close
var notificationClickToClose = app.notification.create({
  icon: '<i class="icon demo-icon">7</i>',
  title: 'Framework7',
  titleRightText: 'now',
  subtitle: 'Notification with close on click',
  text: 'Click me to close',
  closeOnClick: true,
})
// With callback on close
var notificationCallbackOnClose = app.notification.create({
  icon: '<i class="icon demo-icon">7</i>',
  title: 'Framework7',
  titleRightText: 'now',
  subtitle: 'Notification with close on click',
  text: 'Click me to close',
  closeOnClick: true,
  on: {
    close: function () {
      app.dialog.alert('Notification closed');
    },
  },
});
// Open Notifications
$$('.open-full').on('click', function () {
  notificationFull.open();
});
$$('.open-with-button').on('click', function () {
  notificationWithButton.open();
});
$$('.open-click-to-close').on('click', function () {
  notificationClickToClose.open();
});
$$('.open-callback-on-close').on('click', function () {
  notificationCallbackOnClose.open();
});

← Navbar

Page →