@forter/toast
v2.4.2
Published
toast from Forter Components
Downloads
57
Readme
fc-toast
An element to emphasize message after actions
Usage
<script>
import '@forter/toast';
</script>
<fc-toast show>
Toast message is here!
</fc-toast>
Examples
<!-- toasts -->
<p> Intents: </p>
<fc-button onclick="FC.toast({ message: 'Toast message is here' })">Default</fc-button>
<fc-button intent="primary" onclick="FC.toast.primary({ message: 'Toast message is here' })">Primary</fc-button>
<fc-button intent="secondary" onclick="FC.toast.secondary({ message: 'Toast message is here' })">Secondary</fc-button>
<fc-button intent="apply" onclick="FC.toast.apply({ message: 'Toast message is here' })">Apply</fc-button>
<fc-button intent="cancel" onclick="FC.toast.cancel({ message: 'Toast message is here' })">Cancel</fc-button>
<fc-button intent="success" onclick="FC.toast.success({ message: 'Toast success message is here' })">Success</fc-button>
<fc-button intent="warn" onclick="FC.toast.warn({ message: 'Toast danger message is here' })">Warn</fc-button>
<fc-button intent="danger" onclick="FC.toast.danger({ message: 'Toast danger message is here' })">Danger</fc-button>
<p> Loading: </p>
<fc-button onclick="FC.toast.loading({ message: 'Loading Top...'})">Loading</fc-button>
<p> Icon: </p>
<fc-button onclick="FC.toast({ message: 'Loading Top...', icon: 'admin' })"><fc-icon="admin" /> Icon </fc-button>
<p> Position </b></p>
<fc-button onclick="FC.toast({ message: 'Toast Message Top...'})"> Top...</fc-button>
<fc-button onclick="FC.toast({ message: 'Toast Message Bottom...', position: 'bottom'})"> Bottom...</fc-button>
<fc-toast show style="margin-bottom:25px">
Toast message is here!
</fc-toast>
Properties
| Property | Attribute | Type | Default | Description |
|------------|------------|--------------------------------------------------|-----------|---------------------------------------------|
| icon
| icon
| boolean
| | toast icon. example: admin
|
| intent
| intent
| "apply" \| "warn" \| "success" \| "danger" \| "cancel" \| "primary" \| "secondary"
| "default" | intent color to emphasize the type of toast |
| loading
| loading
| boolean
| false | If the element is loading |
| position
| position
| "top" \| "bottom"
| "top" | appearing toast position |
| show
| show
| boolean
| false | If the element is visible |
Events
| Event | Description |
|--------|--------------------------------------------------|
| open
| when opening a toast you get this event, example: true
|
CSS Custom Properties
| Property | Description |
|-------------------------|-------------|
| --fc-toast-color
| color. |
| --fc-toast-icon-color
| icon color |