2.4.2 • Published 1 month ago
@forter/toast v2.4.2
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 |
2.4.1
1 month ago
2.4.2
1 month ago
2.4.0
2 years ago
2.3.3
2 years ago
2.3.2
2 years ago
2.3.1
2 years ago
2.3.0
3 years ago
2.2.0
4 years ago
2.1.9
4 years ago
2.1.8
4 years ago
2.1.7
4 years ago
2.1.6
4 years ago
2.1.5
4 years ago
2.1.4
4 years ago
2.1.3
4 years ago
2.1.2
4 years ago
2.1.1
4 years ago
2.1.0
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago