@forter/message NPM

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`