Alert (TAlert)
VueJs Alert component with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.
Playground:
Basic example
<t-alert variant="error" show>
Something goes wrong
</t-alert>
Something goes wrong
Props
| Property | Type | Default value | Description |
|---|---|---|---|
| tagName | String | 'div' | The tag used as wrapper |
| bodyTagName | String | 'div' | The tag that wraps the alert text |
| dismissible | Boolean | true | If the alert can be closed and has close button |
| show | Boolean | false | If the alert should be shown |
| timeout | Number | undefined | Time in milliseconds before the alert is auto hidden |
| classes | Object | {...} (see below) | The default CSS classes |
| fixedClasses | Object | {...} (see below) | The default CSS Fixed classes shared for all variants |
| variants | Object | undefined | The different variants of classes the component have |
| variant | [String, Object] | undefined | The variant that should be used |
Classes and variants format
This component expects an object with classes named after every child element.
The properties in that object are the following:
| Property | Description |
|---|---|
| wrapper | Wrapper of the alert |
| body | Wrapper of the text |
| close | Close button |
| closeIcon | Close button svg icon |
Example
{
fixedClasses: {
wrapper: 'relative flex items-center p-4 border-l-4 rounded shadow-sm',
body: 'flex-grow',
close: 'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
closeIcon: 'fill-current h-4 w-4'
},
classes: {
wrapper: 'bg-blue-50 border-blue-500',
body: 'text-blue-700',
close: 'text-blue-500 hover:bg-blue-200'
},
variants: {
danger: {
wrapper: 'bg-red-50 border-red-500',
body: 'text-red-700',
close: 'text-red-500 hover:bg-red-200'
},
success: {
wrapper: 'bg-green-50 border-green-500',
body: 'text-green-700',
close: 'text-green-500 hover:bg-green-200'
}
}
}
Events
| Event | Arguments | Description |
|---|---|---|
| shown | - | Emitted when the alert is shown |
| hidden | - | Emitted when alert is hidden |
Slots
| Slot | Description |
|---|---|
| default | Content of the alert |
| close | Content of the dismiss button |