Notify message prompt

introduce

Display message prompts at the top of the page, supporting component calling and function calling.

Function call

In order to facilitate the use of Notify, zebra provides a series of auxiliary functions through which global message prompts can be quickly evoked.

For example, using the showNotify function, the corresponding prompt will be rendered directly on the page after being called.

import { useNotify } from '../../uni_modules/zebra-ui'
const notify = useNotify()
notify.showNotify({
   message: 'Notification content',
   type
})

Basic usage

import { useNotify } from '../../uni_modules/zebra-ui'
const notify = useNotify()
// Automatically close after 3 seconds
notify.showNotify('notification content');
//Actively close
notify.closeNotify();

Notification type

Supports four notification types: primary, success, warning, and danger. The default is danger.

import { useNotify } from '../../uni_modules/zebra-ui'
const notify = useNotify()

// Main notification
notify.showNotify({ type: 'primary', message: 'Notification content' });

// Success notification
notify.showNotify({ type: 'success', message: 'Notification content' });

// danger notification
notify.showNotify({ type: 'danger', message: 'Notification content' });

// warning notification
notify.showNotify({ type: 'warning', message: 'Notification content' });

Custom notifications

Customize the color, position and display duration of message notifications.

notify.showNotify({
   message: 'Custom color',
   color: '#ad0000',
   background: '#ffe1e1',
});

notify.showNotify({
   message: 'Custom location',
   position: 'bottom',
});

notify.showNotify({
   message: 'Custom duration',
   duration: 1000,
});

Using Notify component

If you need to embed components or other custom content within Notify, you can use the Notify component directly and customize it using the default slot.

<z-cell is-link title="Use Notify component" @click="showComponentCall" />
<z-notify
   v-model:show="show"
   type="success"
   custom-navbar
   use-component
>
   <z-icon name="notification" />
   <text style="margin-left: 8rpx">Content</text>
</z-notify>

const show = ref(false)
const showComponentCall = () => {
   show.value = true
   setTimeout(() => {
     show.value = false
   }, 2000)
}

method

Zebra exports the following Notify related auxiliary functions:

NotifyOptions

When calling methods such as showNotify, the following options are supported:

Props

When calling Notify through a component, the following Props are supported:

Events

When calling Notify through a component, the following events are supported:

Slots

When calling Notify through a component, the following slots are supported:

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.