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 |