fc-message
Presentation of alert in different use cases.
Usage
<script>
import '@forter/message';
</script>
<fc-message>
<span>“If a man does not have sauce, then he is lost.</span>
<span> But the same man can get lost in the sauce.”</span>
<b>--Gucci Mane </b>
</fc-message>
Examples
<!-- Mix - Fill - Success -->
<fc-message type="fill" intent="success">Success</fc-message>
<!-- Mix - Fill - Danger -->
<fc-message type="fill" intent="danger">Danger</fc-message>
<!-- Mix - Fill - Warn -->
<fc-message type="fill" intent="warn">Warn</fc-message>
Properties
Property | Attribute | Type | Description |
---|---|---|---|
icon |
icon |
string |
The message's icon instead of the default one |
intent |
intent |
"primary" | "secondary" | "success" | "danger" | "warn" |
The message's intent. See Intents in README. |
type |
type |
"fill" | "text" |
The tag style type. |
Slots
Name | Description |
---|---|
content slot. example: <span>“If a man does not have sauce, then he is lost.</span><span> But the same man can get lost in the sauce.”</span><br><b>--Gucci Mane </b>'
|
CSS Custom Properties
Property | Description |
---|---|
--fc-message-background |
default: rgba(0, 0, 0, 0.05)
|
--fc-message-border |
default: 1px solid gold
|
--fc-message-border-radius |
default: 4px example: 5px
|
--fc-message-color |
default: rgba(0, 0, 0, 0.65)
|
--fc-message-font-size |
default: 12px example: 3px
|
--fc-message-height |
default: 18px
|
--fc-message-padding |
default: 0px
|
--fc-message-text-align |
example: right
|