Home›Docs›Data›Toast Library

Toast Library

Last updated: 28 days ago

Category: Data

A short real-time message that disappears automatically and cannot be clicked or copied

Toast Library28 days ago Message Library: Event and Method Usage Examples1 month ago Message Library1 month ago

Basic Usage

Different from the Toast and Callout modules, Toast is designed for real-time short messages. These messages cannot be copied or clicked, and will automatically disappear after a few seconds without occupying page space.

A Toast instance must be created through event triggering. To display it, use the show method with the content parameter to pass the message content.

Output
HTML
JS

```
                
                
            
```

                
                demo0001btn.onclick=()=>{
                    new orca.Toast({content:'Simple toast'}).show();
                }

Toast Status

Use the status parameter to indicate message status. Available values are:

succ: Green, indicates success or completion
error: Red, indicates error or failure
info: Black, indicates regular information (default)
warn: Yellow, indicates warning
issue: Orange, indicates question

Output
HTML
JS

```
                
                
            
```

                
                demo0005btn01.onclick=()=>{
                    new orca.Toast({content:'Success!',status:'succ'}).show();
                }
                demo0005btn02.onclick=()=>{
                    new orca.Toast({content:'Failure!',status:'error'}).show();
                }
                demo0005btn03.onclick=()=>{
                    new orca.Toast({content:'Information!',status:'info'}).show();
                }
                demo0005btn04.onclick=()=>{
                    new orca.Toast({content:'Warning!',status:'warn'}).show();
                }
                demo0005btn05.onclick=()=>{
                    new orca.Toast({content:'Question!',status:'issue'}).show();
                }

Special Styles

You can set special styles through the feature parameter. The available value is plain.

Output
HTML
JS

```
                
                
            
```

                
                demo0105btn01.onclick=()=>{
                    new orca.Toast({content:'Success!',status:'succ',feature:'plain'}).show();
                }
                demo0105btn02.onclick=()=>{
                    new orca.Toast({content:'Failure!',status:'error',feature:'plain'}).show();
                }
                demo0105btn03.onclick=()=>{
                    new orca.Toast({content:'Information!',status:'info',feature:'plain'}).show();
                }
                demo0105btn04.onclick=()=>{
                    new orca.Toast({content:'Warning!',status:'warn',feature:'plain'}).show();
                }
                demo0105btn05.onclick=()=>{
                    new orca.Toast({content:'Question!',status:'issue',feature:'plain'}).show();
                }

Default Content

The content parameter is used to set the message content. If left empty, default content will be displayed.

Output
HTML
JS

```
                
                
            
```

                
                demo0101btn01.onclick=()=>{
                    new orca.Toast({status:'info'}).show();
                }
                demo0101btn02.onclick=()=>{
                    new orca.Toast({status:'succ'}).show();
                }
                demo0101btn03.onclick=()=>{
                    new orca.Toast({status:'error'}).show();
                }
                demo0101btn04.onclick=()=>{
                    new orca.Toast({status:'issue'}).show();
                }
                demo0101btn05.onclick=()=>{
                    new orca.Toast({status:'warn'}).show();
                }

Immediate Display

Besides using the show method after creating an instance, you can also set the parameter eager:true to display immediately.

Output
HTML
JS

```
                
                
            
```

                
                demo0002btn.onclick=()=>{
                    new orca.Toast({
                        content:'Simple toast',
                        eager:true,
                        delay:300000
                    });
                }

Position

Set the toast position using the placement parameter. Available values are: top, center, and bottom (default is bottom).

Output
HTML
JS

```
                
                
            
```

                
                demo0003btn01.onclick=()=>{
                    new orca.Toast({placement:'top'}).show();
                }
                demo0003btn02.onclick=()=>{
                    new orca.Toast({placement:'center'}).show();
                }
                demo0003btn03.onclick=()=>{
                    new orca.Toast({placement:'bottom'}).show();
                }

Using Icons

Toasts don't display icons by default. Use the iconized parameter to show icons.

Output
HTML
JS

```
                
                
            
```

                
                demo0004btn01.onclick=()=>{
                    new orca.Toast({iconized:true,status:'info'}).show();
                }
                demo0004btn02.onclick=()=>{
                    new orca.Toast({iconized:true,status:'succ'}).show();
                }
                demo0004btn03.onclick=()=>{
                    new orca.Toast({iconized:true,status:'error'}).show();
                }
                demo0004btn04.onclick=()=>{
                    new orca.Toast({iconized:true,status:'issue'}).show();
                }
                demo0004btn05.onclick=()=>{
                    new orca.Toast({iconized:true,status:'warn'}).show();
                }

Manual Display and Close

You can first create a Toast instance and then display/close it as needed.

Although Toast instances will close automatically after a delay, users may need to close them immediately using the hide method.

Output
HTML
JS

```
                
                
            
```

                
                let ins;
                demo0102btn01.onclick=()=>{
                    if(ins)return;
                    ins = new orca.Toast({
                        content:'Simple toast',
                    });
                }
                demo0102btn02.onclick=()=>{
                    ins && ins.show();
                }
                 demo0102btn03.onclick=()=>{
                    ins && ins.hide();
                }

Update Content and Parameters

When creation and display are separate operations, you can use the updateCont method to update content and the update method to update parameters.

Output
HTML
JS

```
                
                
            
```

                
                let ins;
                demo0202btn01.onclick=()=>{
                    if(ins)return;
                    ins = new orca.Toast({
                        content:'Simple toast',
                    });
                }
                demo0202btn02.onclick=()=>{
                    ins && ins.show();
                }
                 demo0202btn03.onclick=()=>{
                    ins && ins.updateCont('New content');
                }
                demo0202btn04.onclick=()=>{
                    ins && ins.update({
                        status:'error',
                        iconized:true,
                        placement:'center',
                    });
                }

Basic Display Configuration

Property	Type	Default	Description
content	string/boolean	''	Toast content
classes	string	''	Custom CSS classes
placement	'top'/'center'/'bottom'	'bottom'	Display position
feature	'plain'	''	Display feature
zIndex	number	0	Toast z-index

Status Configuration

Property	Type	Default	Description
status	'succ'/'error'/'issue'/'info'/'warn'	'info'	Toast status type
iconized	boolean	false	Whether to show icon

Behavior Configuration

Property	Type	Default	Description
delay	number	3000	Auto-close delay (ms)
eager	boolean	false	Whether to show immediately

Callback Functions

Property	Type	Default	Description
onShown	function	null	Callback after shown
onHidden	function	null	Callback after hidden
onUpdated	function	null	Callback after update
onUpdatedCont	function	null	Callback after update content

Viewer Library: More Features and Demo Examples

24 days ago