Alarm Component
Category: BubbleALARM alerts are typically used to locate and display warning events, providing conspicuous warnings or notifications. This alert component supports displaying icons, text, and images, with three halo diffusion sizes available.
Basic Usage
Use the oc-alarm tag to represent an alarm, which defaults to a red dot with ripple effect.
- Output
- HTML
Themes
Set the color theme of the alarm using the theme property, supports: prim, error (default), info, warn, succ, and issue.
- Output
- HTML
Sizes
Set the ripple size using the size property, available options: sm, md (default), and lg.
- Output
- HTML
Using Content
The alarm maintains a 1:1 aspect ratio and is adaptive - its dimensions will change according to its content. Notes:
- The alarm is designed to indicate warnings rather than convey large amounts of text, so content should be brief.
- Text content needs to be wrapped in HTML tags to ensure it won't be covered by the ripple effect.
- More content means larger alarm size and bigger ripple waves.
Use the label property to display text, or place text directly within the tag. Supports HTML multiline text.
- Output
- HTML
-
FAlarm 12:65
FAlarm
-
Additional Content
Beyond simple text display, it also supports icons (via icon attribute) and images (via image attribute).
Since the purpose of the alarm is to issue warnings rather than display content, the content should be concise. Also, only one of the three attributes - label, icon, or image - should be used at a time.
- Output
- HTML
Attributes
| Attribute | Optional Values | Default | Description |
|---|---|---|---|
| icon | - | - | Icon class name |
| image | - | - | Image URL |
| theme | 'prim'/'error'/'info'/'warn'/'succ'/'issue' | 'error' | Color theme |
| size | 'sm'/'md'/'lg' | 'md' | Size |
| label | - | - | Text content |
Common Methods
Common component methods:
set: Set properties (takes key-value pairs or array)reset: Reset properties (no params)clear: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected: Component connected (no params)disconnected: Component disconnected (no params)adopted: Component moved (no params)set: Property set (receives value)cleared: Property cleared (no params)reset: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})
