Toast light reminder

introduce

A black translucent prompt pops up in the middle of the page, which is used for message notifications, loading prompts, operation result prompts and other scenarios.

Function call

In order to facilitate the use of Toast, zebra-ui provides a series of auxiliary functions through which Toast components can be quickly evoked.

For example, if you use the showToast function, the corresponding light prompt will be rendered directly on the page after being called.

There is no need to import it after using the unplugin-auto-import plug-in. For details, see Advanced Usage.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
toast.showToast('prompt content');

Code Demo

Text prompt

Use the showToast method to display a text tooltip in the middle of the screen.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
toast.showToast('prompt content');

Loading tips

Use the showLoadingToast method to show the loading prompt, and the forbidClick option to disable background clicks.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

toast.showLoadingToast({
   message: 'Loading...',
   forbidClick: true,
});

Success/failure prompt

Use the showSuccessToast method to display success prompts and the showFailToast method to display failure prompts.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

toast.showSuccessToast('Successful copy');
toast.showFailToast('failure copy');

Custom icon

The icon can be customized through the icon option, which supports passing in the icon name or image link, which is equivalent to the name attribute of the Icon component.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

toast.showToast({
   message: 'Custom icon',
   icon: 'smile',
});

toast.showToast({
   message: 'custom picture',
   icon: 'https://cdn.zebraui.com/zebra-ui/images/assets/demo-select.png',
});

The loading icon type can be customized through the loadingType attribute.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

toast.showLoadingToast({
   message: 'Loading...',
   forbidClick: true,
   loadingType: 'spinner',
});

Custom location

Toast is rendered in the center of the screen by default, and the position of Toast display can be controlled through the position attribute.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

toast.showToast({
   message: 'Top display',
   position: 'top',
});

toast.showToast({
   message: 'Bottom display',
   position: 'bottom',
});

Text wrapping method

The wordBreak option can control the truncation method when the text in Toast is too long. The default value is break-all, and the optional values ​​are break-word and normal.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

//Truncate words on line breaks
toast.showToast({
   message: 'This message will contain a incomprehensibilities long word.',
   wordBreak: 'break-all',
});

//Do not truncate words when wrapping
toast.showToast({
   message: 'This message will contain a incomprehensibilities long word.',
   wordBreak: 'break-word',
});

Dynamic update tips

When the Toast method is executed, the corresponding Toast instance will be returned. By modifying the message attribute on the instance, the effect of dynamically updating the prompt can be achieved.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

const toastData = toast.showLoadingToast({
   duration: 0,
   forbidClick: true,
   message: 'Countdown to 3 seconds',
});

let second = 3;
const timer = setInterval(() => {
   second--;
   if (second) {
     toastData!.message.value = `Countdown ${second} seconds`
   } else {
     clearInterval(timer);
     toast.closeToast();
   }
}, 1000);

Modify default configuration

The default configuration of showToast and other methods can be globally modified through the setToastDefaultOptions function.

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

toast.setToastDefaultOptions({ duration: 2000 });

toast.setToastDefaultOptions('loading', { forbidClick: true });

toast.resetToastDefaultOptions();

toast.resetToastDefaultOptions('loading');

Using Toast component

If you need to embed components or other custom content within Toast, you can use the Toast component directly and use the message slot for customization.

<z-toast use-component v-model:show="show" :duration="0">
   <template #message>
     <view class="toast-custom">
       <z-icon name="error" color="var(--z-orange)"></z-icon>
       <view> This is a piece of content. Are you sure you want to delete it? </view>
     </view>
     <view class="toast-button">
       <z-button type="primary" size="mini" @click="show = false"
         >Confirm</z-button
       >
       <z-button size="mini" @click="show = false">Cancel</z-button>
     </view>
   </template>
</z-toast>
import { ref } from 'vue';
const show = ref(false)
.demo-toast {
   .toast-custom {
     display: flex;
     align-items: center;
     padding: 30rpx;
   }

   .toast-button {
     display: flex;
     align-items: center;
     justify-content: flex-end;
   }
}

API

method

Zebra exports the following Toast-related auxiliary functions:

Method nameDescriptionParametersReturn value
showToastDisplay text promptsToastOptions | stringToast instance
showLoadingToastShow loading promptToastOptions | stringToast instance
showSuccessToastShow success promptToastOptions | stringToast instance
showFailToastShow failure promptToastOptions | stringToast instance
closeToastClose the currently displayed tooltipcloseAll: booleanvoid
setToastDefaultOptionsModify the default configuration, affecting all showToast calls. Passing in type can modify the default configuration of the specified type of Toasttype | ToastOptionsvoid
resetToastDefaultOptionsResets the default configuration, affecting all showToast calls. Passing in type can reset the default configuration of the specified type of Toasttypevoid

ToastOptions data structure

When calling showToast and other methods, the following options are supported:

ParametersDescriptionTypeDefault value
typePrompt type, optional values are loading success failToastTypetext
positionPosition, optional values are top bottomToastPositionmiddle
messagetext contentstring''
wordBreakThe line breaking method of text content. The optional values are normal break-all break-wordToastWordBreak'break-all'
iconCustom icon, supports passing in icon name or image chainConnection, equivalent to the name attribute of the Icon componentstring-
iconSizeIcon size, the default unit is px, you can pass in a string with rpx unitnumber | string-
iconPrefixIcon class name prefix, equivalent to the class-prefix attribute of the Icon componentstringz-icon
overlaywhether to display the background mask layerbooleanfalse
forbidClickWhether to prohibit background clicksbooleanfalse
closeOnClickWhether to close after clickingbooleanfalse
closeOnClickOverlayWhether to close the mask layer after clickingbooleanfalse
loadingTypeLoading icon type, optional value is spinnerstringcircular
durationdisplay duration (ms), when the value is 0, the toast will not disappearnumber2000
classNameCustom class namestring | Array | object-
overlayClassCustom mask layer class namestring | Array | object-
overlayStyleCustom mask layer styleobject-
transitionanimation class name, equivalent to the name attribute of transitionstringfade
z-indexSet the component's z-index level to a fixed valuenumber | string2000+
onCloseCallback function when closingFunction-
onOpenedCallback function after full displayFunction-

Props

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

ParametersDescriptionTypeDefault value
typePrompt type, optional values are loading success failToastTypetext
positionPosition, optional values are top bottomToastPositionmiddle
messagetext contentstring''
word-breakThe line breaking method of text content. The optional values are normal break-all break-wordToastWordBreak'break-all'
iconCustom icon, supports passing in icon name or image link, which is equivalent to the name attribute of the Icon componentstring-
icon-sizeIcon size, the default unit is px, you can pass in a string with rpx unitnumber | string-
icon-prefixIcon class name prefix, equivalent to the class-prefix attribute of the Icon componentstringz-icon
overlaywhether to display the background mask layerbooleanfalse
forbid-clickWhether to prohibit background clicksbooleanfalse
close-on-clickWhether to close after clickbooleanfalse
close-on-click-overlayWhether to close the overlay after clicking itbooleanfalse
loading-typeLoading icon type, optional value is spinnerstringcircular
durationdisplay duration (ms), when the value is 0, the toast will not disappearnumber2000
class-nameCustom class namestring | Array | object-
overlay-classCustom mask layer class namestring | Array | object-
overlay-styleCustom mask layer styleobject-
transitionanimation class name, equivalent to the name attribute of transitionstringfade
z-indexSet the component's z-index level to a fixed valuenumber | string2000+

Events

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

Event nameDescriptionCallback parameters
closecallback function when closing-
openedcallback function after full display-

Slots

When using the Toast component, the following slots are supported:

NameDescription
messageCustom text content

Theme customization

Style variables

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

NameDefaultDescription
--z-toast-max-width70%-
--z-toast-font-sizevar(--z-font-size-md)-
--z-toast-text-colorvar(--z-white)-
--z-toast-loading-icon-colorvar(--z-white)-
--z-toast-line-heightvar(--z-line-height-md)-
--z-toast-radiusvar(--z-radius-lg)-
--z-toast-backgroundfade(var(--z-black), 70%)-
--z-toast-icon-size72rpx-
--z-toast-text-min-width192rpx-
--z-toast-text-paddingvar(--z-padding-xs) var(--z-padding-sm)-
--z-toast-default-paddingvar(--z-padding-md)-
--z-toast-default-width176rpx-
--z-toast-default-min-height176rpx-
--z-toast-position-top-distance20%-
--z-toast-position-bottom-distance20%-

common problem

How to define multiple toast components

useToast supports passing name to distinguish the name of each toast.

<z-toast name="test"></z-toast>
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast('test')
toast.showToast('text prompt')