Notify

A message prompt is displayed at the top of the page, and two methods of function call and component call are supported.

Code Demo

Basic usage

import Notify from 'press-ui/press-notify';

Notify('notification content');

<!-- Add the corresponding node in the page -->
<press-notify id="press-notify" />

Notification Type

Support primary, success, warning, danger four notification types, the default is danger.

// main notification
Notify({ type: 'primary', message: 'notification content' });

// success notification
Notify({ type: 'success', message: 'Notification content' });

// hazard notification
Notify({ type: 'danger', message: 'notification content' });

// warning notification
Notify({ type: 'warning', message: 'notification content' });

Custom Notifications

Customize the color and display duration of message notifications.

Notify({
   message: 'custom color',
   color: '#ad0000',
   background: '#ffe1e1',
});

Notify({
   message: 'custom duration',
   duration: 1000,
});

Custom selectors

Notify({
   message: 'Custom node selector',
   duration: 1000,
   selector: '#custom-selector',
});

<!-- Add a custom node in the page -->
<press-notify id="custom-selector" />

API

method

method name	description	parameters	return value
Notify	Display prompt	options \| message	notify instance
Notify.clear	close notification	options	void

Options

Parameter	Description	Type	Default
type v1.0.0	type, optional values are primary success warning	string	danger
message v1.0.0	display copy, support newline via \n	string	''
duration	display duration (ms), when the value is 0, the notify will not disappear	number	3000
selector	custom node selector	string	press-notify
color	font color	string	#fff
top	top distance	number	0
background	background color	string	-
context	the selection range of the selector, you can pass in the this of the custom component as the context	object	the current page
onClick	Callback function when clicked	function	-
onOpened	callback function after full display	function	-
onClose	Callback function when closing	function	-
safeAreaInsetTop	Whether to leave a top safe distance (status bar height)	boolean	false

Theme customization

--notify-padding：

--notify-font-size：

--notify-line-height：

--notify-primary-background-color：

--notify-success-background-color：

--notify-danger-background-color：

--notify-warning-background-color：