VueJs Alert component with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.
In this tab you can view and download or copy the settings to make your theme look like the demo . If you want to modify these settings use the customize tab.
Install within library
Only install this component
Install with old syntax
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import {
TAlert,
} from 'vue-tailwind/dist/components'
const settings = {
't-alert' : {
component: TAlert,
props: {
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'
}
}
}
}
}
Vue. use ( VueTailwind, settings)
In this tab you can modify the TailwindCSS classes of the theme we create as example, you can also edit or delete as many variants as you wish. Once you finished you can preview your theme on the demo tab or grab the settings from the settings tab.
Fixed classes
Fixed classes shared by all the variants
Base classes
Classes used by default (when no variant is applied)
wrapper classes
relative flex items-center p-4 border-l-4 rounded shadow-sm
close classes
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
Preview
So you selected VueJs & Tailwind Combo, Good decision!
Variants:
Variant classes
Classes used when the danger variant is applied
wrapper classes
relative flex items-center p-4 border-l-4 rounded shadow-sm
close classes
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
Preview
So you selected VueJs & Tailwind Combo, Good decision!
Remove variant
Variant classes
Classes used when the success variant is applied
wrapper classes
relative flex items-center p-4 border-l-4 rounded shadow-sm
close classes
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
Preview
So you selected VueJs & Tailwind Combo, Good decision!
Remove variant
Add variant
< t-alertvariant = " error" show > </ t-alert> Property Type Default value Description tagName String'div'The tag used as wrapper bodyTagName String'div'The tag that wraps the alert text dismissible BooleantrueIf the alert can be closed and has close button show BooleanfalseIf the alert should be shown timeout NumberundefinedTime 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 ObjectundefinedThe different variants of classes the component have variant [String, Object]undefinedThe variant that should be used
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
{
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'
}
}
}
Event Arguments Description shown - Emitted when the alert is shown hidden - Emitted when alert is hidden
Slot Description default Content of the alert close Content of the dismiss button