Callout Component
Category: BasicThe callout component can convey: notifications, announcements, alerts, warnings, notices, and other informational messages. It serves as a replacement for alert and notice components.
Basic Usage
Wrap text content with the <oc-callout> tag to display an alert message.
- Output
- HTML
-
Earth's expected long-term future is tied to that of the Sun. -
You can also set the content via the content attribute.
- Output
- HTML
Themes
Set the alert theme color using the theme attribute. Available options: prim (primary), succ (success), error (danger), info (information), warn (warning), issue (default), and text (plain text).
succtypically indicates success or approvalerrortypically indicates danger or errorsissuetypically indicates existing problems that need review/resolutioninfotypically indicates general notifications
- Output
- HTML
-
Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. After formation
Earth's atmosphere and oceans were formed by volcanic activity and outgassing.After formation
Earth's atmosphere and oceans were formed by volcanic activity and outgassing.After formation
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. -
Using Icons
Use the icon attribute with an icon class name to display an icon.
- Output
- HTML
-
Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. -
Using Prominent Icons
When using the icon attribute, add the notable attribute to display a larger, more prominent icon.
- Output
- HTML
-
Earth's expected long-term future is tied to that of the Sun. Earth's atmosphere and oceans were formed by volcanic activity and outgassing. -
Sizing
Set the size using the size attribute. Three sizes are supported: sm (default), md (medium), and lg (large).
- Output
- HTML
-
Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. Earth's expected long-term future is tied to that of the Sun. -
Attributes
| Name | Options | Default | Description |
|---|---|---|---|
| label | '' | - | Display title |
| theme | 'prim'/'error'/'succ'/'info'/'warn'/ 'issue'/'text'/ |
'warn' | Theme color |
| icon | ''/- | - | Icon class name |
| disk | ''/- | - | Circular image |
| cube | ''/- | - | Square image |
| image | ''/- | - | Regular image |
| href | ''/- | - | Hyperlink |
| target | '_blank'/'_self'/- | - | Hyperlink target |
| rel | 'nofollow'/'canonical'/'ugc' | - | Hyperlink rel attribute |
| feature | 'alert'/'plain'/'' | - | Combined style |
| autoclose | ''/- | '' | Auto-close after timeout |
| closable | ''/- | - | Can be closed by clicking |
| opaque | ''/- | - | Whether to remain opaque when hovered |
| hidden | ''/- | - | Whether to hide |
| result | 'succ'/'info'/'warn'/'issue'/'error'/''/- | - | Whether to show dynamic icon |
| square | ''/- | - | Whether to use square corners |
| size | 'sm'/'md'/'lg'/''/- | - | Size |
| notable | ''/- | - | Whether to highlight |
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')})
