Skip to Content

Enhance your Control-Lib!

Intro

Today i want to show you a new custom control for UI5-applications. I let myself inspired by codrops once again (see Notification Styles Inspiration).

The idea is to create a simple and responsive notification, which can be used on different devices. Besides, it should be possible to have different types of notifications (error, warning, information and success). Although UI5-developers can already use the NotificationBar to show messages and notifications, i want to offer an additional control, which has its focus on simplicity and a responsive design.

To get a better impression, please check out the following links.

View Demo

Get Source Code

Usage

It’s pretty simple to add a new notification in your app. Just write the following code to create a new instance of the control and to show it immediately.


new neko.control.Notification({
       message : "Your message",
       type : "success",
      durability : 3000,
       close : function(){
              // do something great
             },
       open : function(){
              // do something great
            }
       }).show();

When you have a look at the control implementation, that you can see further properties like “layout” and “effect”. These properties can be used, to apply different CSS to your notification. On this way, you can influence the behavior and layout of your control over additional CSS-classes. And this is really cool, because you can enhance your notifications just with CSS. There is no need to modify the underlying JavaScript implementation. If you need some suggestions for this, just a look at the mentioned codrops-article above.

Regards

Michael

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply