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.

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

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;
   }
}

method

Zebra exports the following Toast-related auxiliary functions:

ToastOptions data structure

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

Props

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

Events

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

Slots

When using the Toast 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.

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')