Press UI

# Toast

A black translucent prompt pops up in the middle of the page, which is used in scenarios such as message notification, loading prompt, and operation result prompt.

# Code Demo

# Text Prompt

import Toast from 'press-ui/press-toast/press-toast';

Toast('I am a prompt copywriter, it is recommended not to exceed fifteen characters~');

<press-toast id="press-toast" />

# Loading Tips

Use the Toast.loading method to display the loading prompt, use the forbidClick attribute to disable the background click, and use the loadingType attribute to customize the loading icon type.

Toast.loading({
   message: 'Loading...',
   forbidClick: true,
});

// custom loading icon
Toast.loading({
   message: 'Loading...',
   forbidClick: true,
   loadingType: 'spinner',
});

# Success/Failure Prompt

Toast.success('successful copywriting');
Toast.fail('Failed copywriting');

# Dynamic update prompt

const toast = Toast.loading({
   duration: 0, // keep displaying toast
   forbidClick: true,
   message: 'Countdown 3 seconds',
   selector: '#custom-selector',
});

let second = 3;
const timer = setInterval(() => {
   second--;
   if (second) {
     toast.setData({
       message: `Countdown ${second} seconds`,
     });
   } else {
     clearInterval(timer);
     Toast. clear();
   }
}, 1000);

<press-toast id="custom-selector" />

# OnClose callback function

Toast({
   type: 'success',
   message: 'Submitted successfully',
   onClose: () => {
     console.log('Execute OnClose function');
   },
});

# API

# method

method name parameters return value description
Toast options \| message toast instance display hint
Toast.loading options \| message toast instance display loading prompt
Toast.success options \| message toast instance display success prompt
Toast.fail options \| message toast instance display failure prompt
Toast.clear clearAll void close the prompt
Toast.setDefaultOptions options void Modify the default configuration, effective for all Toasts
Toast.resetDefaultOptions - void Reset the default configuration, effective for all Toasts

# Options

Parameter Description Type Default
type Prompt type, optional values are loading success fail html string text
position position, optional values are top middle bottom string middle
message content string ''
mask Whether to display the mask layer boolean false
forbidClick Whether to forbid background clicks boolean false
loadingType loading icon type, optional value is spinner string circular
zIndex z-index level number 1000
duration display duration (ms), when the value is 0, the toast will not disappear number 2000
selector custom selector string press-toast
context the selection range of the selector, you can pass in the this of the custom component as the context object the current page
onClose Callback function when closing function -

# Slot

Name Description
- Custom Content

# Theme customization

--toast-max-width：
--toast-font-size：
--toast-text-color：
--toast-line-height：
--toast-border-radius：
--toast-background-color：
--toast-icon-size：
--toast-text-min-width：
--toast-text-padding：
--toast-default-padding：
--toast-default-width：
--toast-default-min-height：
横屏

← Transition →