Notify

The Notify control is a notification container that can be used to display messages to the user.

Import

import { Notify } from "@schukai/monster/source/components/notify/notify.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Introduction

This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.

Key Features

Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.

Improving the user experience

This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.

These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.

Efficiency in the development process

Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.

Notify

This is a simple notification control. When you call the method push("this is a message"), it displays the message with a standard timeout of 6 seconds. You can either pass a string to push or a message control. The latter offers the advantage of allowing more configuration options.

The notification container is positioned absolutely. If no enclosing element is defined with absolute or relative positioning, it will be displayed in one of the corners.

The placement of the control is managed through the `orientation` option. The default value is: left top. To change the position, you can pass data-monster-option-orientation="right top" to the control. The first value is the horizontal position, and the second value is the vertical position.

In this documentation, we wrapped the control with a relative <div> element to show the notification in the center of this page.

Push message

Javascript

import '@schukai/monster/source/components/notify/notify.mjs';


const notify = document.querySelector('monster-notify');
notify.push(`This is a message`);

HTML

<div>
    <monster-notify></monster-notify>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Inline Notify

If a specific area is designated for news and the content does not overlap with other elements, there's no need for a separating shadow. As a result, the shadow is disabled for inline elements.

This example shows the correct use of the inline class via the data-monster-option-classes-control attribute.

Push message

Javascript

import '@schukai/monster/source/components/notify/notify.mjs';


const notify = document.querySelector('monster-notify');
notify.push(`This is a message`);

HTML

<div>
    <monster-notify data-monster-option-classes-control="center inline"></monster-notify>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The Notify component is designed using the Shadow DOM, ensuring its internal structure and styling are encapsulated. This approach isolates the component from external influences, maintaining consistency in its appearance and behavior across different environments.

It includes a container for notification messages, which can be positioned and styled flexibly based on configuration and the provided CSS variables.

Shadow DOM and Accessibility

The use of the Shadow DOM prevents direct manipulation or styling of the component's internal elements from outside. This ensures a consistent design and reliable behavior, making the component robust against unintended style overrides.

For accessibility, the component uses proper semantics and attributes to ensure that notifications are usable by assistive technologies, including screen readers and keyboard navigation tools.

Customizing Through Exported Parts

The Notify component allows for limited customization through exported parts. These parts can be targeted with CSS, enabling developers to adjust the look and feel of specific elements without compromising the component's encapsulation.

Available Part Attributes

control: The main container that holds the entire notification area.
container: The container for individual notification messages.

Example of customizing parts using CSS:


monster-notify::part(control) {
    background-color: #f9f9f9;
    padding: 1rem;
    border: 1px solid #ddd;
}

monster-notify::part(container) {
    font-size: 1rem;
    color: #222;
}

CSS Variables

The Notify component supports a variety of CSS variables for detailed customization. Below is a list of available variables and their purposes:

--monster-bg-color-primary-1: Sets the background color of messages.
--monster-color-primary-1: Sets the text color of messages.
--monster-message-margin-top: Defines the top margin for messages.
--monster-message-margin-bottom: Defines the bottom margin for messages.
--monster-message-margin-right: Defines the right margin for messages.
--monster-message-margin-left: Defines the left margin for messages.
--monster-message-padding-top: Sets the top padding for messages.
--monster-message-padding-bottom: Sets the bottom padding for messages.
--monster-message-padding-right: Sets the right padding for messages.
--monster-message-padding-left: Sets the left padding for messages.
--monster-message-border-width: Controls the border width of messages.
--monster-message-border-color: Sets the border color of messages.
--monster-message-border-style: Defines the border style of messages.
--monster-message-border-radius: Sets the border radius of messages.
--monster-message-border-shadow: Adds a shadow effect to messages.

Example of using CSS variables to customize the design:


monster-notify {
    --monster-bg-color-primary-1: #ffffff;
    --monster-color-primary-1: #333333;
    --monster-message-margin-top: 10px;
    --monster-message-border-radius: 8px;
    --monster-message-border-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

Accessibility

Accessibility is a central consideration in the Notify component's design. The component supports keyboard and screen reader interactions, ensuring notifications are perceivable and operable for all users.

HTML Structure

<monster-notify></monster-notify>

JavaScript Initialization

const element = document.createElement('monster-notify');
document.body.appendChild(element);

Exported

Notify

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

orientation

string

left top

The orientation of the notify element. Allowed values for horizontal orientation are "left", "center", "right". Allowed values for vertical orientation are "top" and "bottom".

templates

object

The templates of the notify element.

templates.main

string

undefined

The main template of the notify element.

classes

object

The classes of the notify element.

classes.container

string

The container class of the notify element.

classes.control

string

center

The control class of the notify element.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Constructor

constructor()1.0.0

The Notify control

Behavioral methods

push(message)

Parameters

message {massage|string}: message

Returns

{Notify}

Static methods

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Notify}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.