Home›Docs›Data›Message Library

Message Library

Last updated: 1 month ago

Category: Data

The Message module displays real-time status notifications, including success, error, information, question, and warning types. It features:Large icon/title mode for emphasis;9 customizable display positions;HTML text support

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

Basic Usage

The message module typically isn't used standalone, so it doesn't operate by adding an oc-message attribute to nodes, nor does it have a corresponding webcomponent. There's only one way to use it - by creating a new instance.

After creating a new instance, the message is initialized but not displayed by default. You need to use the show() method to display it.

The default status is info, indicating an informational notification.

Output
HTML
JS

```
                
                
            
```

                
                demo01.onclick=()=>{
                    new orca.Message({
                        content:'Simple notification'
                    }).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

```
                
                
            
```

                
                demo41.onclick=()=>{
                    new orca.Message({
                        content:'Simple notification',
                        eager:true,
                    });
                }

Position

The default position for message popups is top-center (center-top). Use the placement parameter to set the message position.

Available values are: left-top, center-top, right-top, left-center, center, right-center, left-bottom, center-bottom, right-bottom.

Output
HTML
JS

```
                
                
            
```

                
                LT.onclick=()=>{
                    new orca.Message({content:'left-top',placement:'left-top'}).show();
                }
                CT.onclick=()=>{
                    new orca.Message({content:'center-top',placement:'center-top'}).show();
                }
                RT.onclick=()=>{
                    new orca.Message({content:'right-top',placement:'right-top'}).show();
                }
                LC.onclick=()=>{
                    new orca.Message({content:'left-center',placement:'left-center'}).show();
                }
                CC.onclick=()=>{
                    new orca.Message({content:'center',placement:'center'}).show();
                }
                RC.onclick=()=>{
                    new orca.Message({content:'right-center',placement:'right-center'}).show();
                }
                LB.onclick=()=>{
                    new orca.Message({content:'left-bottom',placement:'left-bottom'}).show();
                }
                CB.onclick=()=>{
                    new orca.Message({content:'center-bottom',placement:'center-bottom'}).show();
                }
                RB.onclick=()=>{
                    new orca.Message({content:'right-bottom',placement:'right-bottom'}).show();
                }

Prominent Display

By default, messages are displayed with small text indicating they can be ignored. To make messages more prominent, use the notable parameter which increases both icon and text size to highlight the message.

In notable mode, the heading parameter is enabled. The heading defaults to empty (using default values) but can also be customized.

Output
HTML
JS

```
                
                
            
```

                
                notable01.onclick=()=>{
                    new orca.Message({content:'The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.',notable:true}).show();
                }
                notable02.onclick=()=>{
                    new orca.Message({content:'The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.',notable:true,heading:'自定义标题'}).show();
                }

Using Icons

Messages don't display icons by default. Use the iconShow parameter to show icons.

Output
HTML
JS

```
                
                
            
```

                
                icon01.onclick=()=>{
                    new orca.Message({content:'The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.',iconShow:true}).show();
                }
                icon02.onclick=()=>{
                    new orca.Message({content:'The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.',notable:true,iconShow:true}).show();
                }

Message 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: Blue, indicates regular information (default)
warn: Yellow, indicates warning
issue: Orange, indicates question

Output
HTML
JS

```
                
                
            
```

                
                demo02.onclick=()=>{
                    new orca.Message({content:'Success!',status:'succ',iconShow:true}).show();
                }
                demo03.onclick=()=>{
                    new orca.Message({content:'Failure!',status:'error',iconShow:true}).show();
                }
                demo04.onclick=()=>{
                    new orca.Message({content:'Information!',status:'info',iconShow:true}).show();
                }
                demo05.onclick=()=>{
                    new orca.Message({content:'Warning!',status:'warn',iconShow:true}).show();
                }
                demo06.onclick=()=>{
                    new orca.Message({content:'Question!',status:'issue',iconShow:true}).show();
                }
                demo07.onclick=()=>{
                    new orca.Message({content:'Success!',status:'succ',iconShow:true,notable:true}).show();
                }
                demo08.onclick=()=>{
                    new orca.Message({content:'Failure!',status:'error',iconShow:true,notable:true}).show();
                }
                demo09.onclick=()=>{
                    new orca.Message({content:'Information!',status:'info',iconShow:true,notable:true}).show();
                }
                demo10.onclick=()=>{
                    new orca.Message({content:'Warning!',status:'warn',iconShow:true,notable:true}).show();
                }
                demo11.onclick=()=>{
                    new orca.Message({content:'Question!',status:'issue',iconShow:true,notable:true}).show();
                }

Basic Display Configuration

Property	Type	Default	Description
heading	string/boolean	''	Title text
content	string/boolean	''	Message content
classes	string	''	Custom CSS classes
placement	'left-top'/'center-top'/'right-top'/ 'left-center'/'center'/'right-center'/ 'left-bottom'/'center-bottom'/'right-bottom'	'center-top'	Display position
zIndex	number	0	Message z-index

Status Configuration

Property	Type	Default	Description
status	'succ'/'error'/'issue'/'info'/'warn'	'info'	Message status type
iconShow	boolean	false	Whether to show icon
notable	boolean	false	Whether to use prominent style

Behavior Configuration

Property	Type	Default	Description
delay	number	3000	Auto-close delay (ms)
progress	boolean	true	Whether to show countdown
closable	boolean	true	Whether to show close button
manual	boolean	false	Whether to manually close
eager	boolean	false	Whether to show immediately