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 name | Description | Parameters | Return value |
---|---|---|---|
showToast | Display text prompts | ToastOptions | string | Toast instance |
showLoadingToast | Show loading prompt | ToastOptions | string | Toast instance |
showSuccessToast | Show success prompt | ToastOptions | string | Toast instance |
showFailToast | Show failure prompt | ToastOptions | string | Toast instance |
closeToast | Close the currently displayed tooltip | closeAll: boolean | void |
setToastDefaultOptions | Modify the default configuration, affecting all showToast calls. Passing in type can modify the default configuration of the specified type of Toast | type | ToastOptions | void |
resetToastDefaultOptions | Resets the default configuration, affecting all showToast calls. Passing in type can reset the default configuration of the specified type of Toast | type | void |
ToastOptions data structure
When calling showToast
and other methods, the following options are supported:
Parameters | Description | Type | Default value |
---|---|---|---|
type | Prompt type, optional values are loading success fail | ToastType | text |
position | Position, optional values are top bottom | ToastPosition | middle |
message | text content | string | '' |
wordBreak | The line breaking method of text content. The optional values are normal break-all break-word | ToastWordBreak | 'break-all' |
icon | Custom icon, supports passing in icon name or image chainConnection, equivalent to the name attribute of the Icon component | string | - |
iconSize | Icon size, the default unit is px , you can pass in a string with rpx unit | number | string | - |
iconPrefix | Icon class name prefix, equivalent to the class-prefix attribute of the Icon component | string | z-icon |
overlay | whether to display the background mask layer | boolean | false |
forbidClick | Whether to prohibit background clicks | boolean | false |
closeOnClick | Whether to close after clicking | boolean | false |
closeOnClickOverlay | Whether to close the mask layer after clicking | boolean | false |
loadingType | Loading icon type, optional value is spinner | string | circular |
duration | display duration (ms), when the value is 0, the toast will not disappear | number | 2000 |
className | Custom class name | string | Array | object | - |
overlayClass | Custom mask layer class name | string | Array | object | - |
overlayStyle | Custom mask layer style | object | - |
transition | animation class name, equivalent to the name attribute of transition | string | fade |
z-index | Set the component's z-index level to a fixed value | number | string | 2000+ |
onClose | Callback function when closing | Function | - |
onOpened | Callback function after full display | Function | - |
Props
When calling Toast
through a component, the following Props are supported:
Parameters | Description | Type | Default value |
---|---|---|---|
type | Prompt type, optional values are loading success fail | ToastType | text |
position | Position, optional values are top bottom | ToastPosition | middle |
message | text content | string | '' |
word-break | The line breaking method of text content. The optional values are normal break-all break-word | ToastWordBreak | 'break-all' |
icon | Custom icon, supports passing in icon name or image link, which is equivalent to the name attribute of the Icon component | string | - |
icon-size | Icon size, the default unit is px , you can pass in a string with rpx unit | number | string | - |
icon-prefix | Icon class name prefix, equivalent to the class-prefix attribute of the Icon component | string | z-icon |
overlay | whether to display the background mask layer | boolean | false |
forbid-click | Whether to prohibit background clicks | boolean | false |
close-on-click | Whether to close after click | boolean | false |
close-on-click-overlay | Whether to close the overlay after clicking it | boolean | false |
loading-type | Loading icon type, optional value is spinner | string | circular |
duration | display duration (ms), when the value is 0, the toast will not disappear | number | 2000 |
class-name | Custom class name | string | Array | object | - |
overlay-class | Custom mask layer class name | string | Array | object | - |
overlay-style | Custom mask layer style | object | - |
transition | animation class name, equivalent to the name attribute of transition | string | fade |
z-index | Set the component's z-index level to a fixed value | number | string | 2000+ |
Events
When calling Toast
through a component, the following events are supported:
Event name | Description | Callback parameters |
---|---|---|
close | callback function when closing | - |
opened | callback function after full display | - |
Slots
When using the Toast
component, the following slots are supported:
Name | Description |
---|---|
message | Custom 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.
Name | Default | Description |
---|---|---|
--z-toast-max-width | 70% | - |
--z-toast-font-size | var(--z-font-size-md) | - |
--z-toast-text-color | var(--z-white) | - |
--z-toast-loading-icon-color | var(--z-white) | - |
--z-toast-line-height | var(--z-line-height-md) | - |
--z-toast-radius | var(--z-radius-lg) | - |
--z-toast-background | fade(var(--z-black), 70%) | - |
--z-toast-icon-size | 72rpx | - |
--z-toast-text-min-width | 192rpx | - |
--z-toast-text-padding | var(--z-padding-xs) var(--z-padding-sm) | - |
--z-toast-default-padding | var(--z-padding-md) | - |
--z-toast-default-width | 176rpx | - |
--z-toast-default-min-height | 176rpx | - |
--z-toast-position-top-distance | 20% | - |
--z-toast-position-bottom-distance | 20% | - |
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')