<tpg-message-status-bar></message-status-bar>
Message Status Bar is used to describe the current stauts of sending or receiving Message function.
Component behavior
The message status bar takes up all horizontal space available by default. It has no interactivity.
Examples
<div style="display:flex; flex-direction: column; gap: 16px">
<tpg-message-status-bar value="25" message-status="received" direction="leading" />
<tpg-message-status-bar value="25" message-status="sending" direction="trailing" />
<tpg-message-status-bar value="75" message-status="delivered" direction="mid-leading" />
<tpg-message-status-bar value="75" message-status="error" direction="mid-trailing" />
<tpg-message-status-bar value="0" message-status="no-message" direction="leading" />
<div style="display:flex; flex-direction: column; gap: 16px">
<tpg-message-status-bar value={25} message-status="received" direction="leading" />
<tpg-message-status-bar value={25} message-status="sending" direction="trailing" />
<tpg-message-status-bar value={75} message-status="delivered" direction="mid-leading" />
<tpg-message-status-bar value={75} message-status="error" direction="mid-trailing" />
<tpg-message-status-bar value={0} message-status="no-message" direction="leading" />
Tables
Properties
| Attribute | Property | Description | Type | Default Value |
| message-status | messageStatus | Status of the Message function. | 'received' | 'sending' | 'delivered' | 'error' | 'no-message' | 'received' |
| direction | direction | Which direction the progress bar should go. | 'leading' | 'trailing' | 'mid-leading' | 'mid-trailing' | 'leading' |
| value | value | A number between 0-100 to determine the progress status.
0 meaning no progress, 100 meaning finished. | number | 0 |
Events
| Event name | Reactjs attribute | Description |
| No events found. |
Functions
| Name | Description | Arguments |
| No functions found. |
Slots
| Name | Description |
| No slots found. |
CSS Parts
| Attribute | Description |
| No CSS parts found. |
Sandbox
