VueTailwind

# Alert

# Playground

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed sit sint, aliquam tenetur aut doloribus eos, eligendi suscipit. Close

Alert variant

# Props

Property Type Default value Accepted values Description
variant String null 'info', 'danger', 'warning', 'success' Alert variant
tagName String div Any vaild HTML the tag used as wrapper
dismissible Boolean true true, false If the alert is dismissible
show Boolean false true, false If the alert should be shown
timeout Number null Any number Time in milliseconds before the alert should be auto hidden
closeButtonTitle String 'Close' true, false The title tag in the close button
Property Description
baseClass Base alert class (never changes)
defaultClass Classes for the default alert variant
successClass Classes for the success alert variant
dangerClass Classes for the danger alert variant
warningClass Classes for the warning alert variant
closeButtonClass Classes for the close button
closeIconClass Classes for the close SVG icon

# 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 dismissable button

# Default theme settings

const TAlert = {
  baseClass: 'border-l-4 p-4 relative flex',
  defaultClass: 'bg-gray-100 border-gray-500 text-gray-800',
  infoClass: 'bg-blue-100 border-blue-500 text-blue-800',
  successClass: 'bg-green-100 border-green-500 text-green-800',
  dangerClass: 'bg-red-100 border-red-500 text-red-800',
  warningClass: 'bg-yellow-100 border-yellow-500 text-yellow-800',
  closeButtonClass: 'absolute top-0 bottom-0 right-0 px-4 py-3',
  closeIconClass: 'fill-current h-6 w-6',
}

export default TAlert
  • Remember that in order to change the default settings you can change default theme or use the props:
<t-alert
  base-class="border px-4 py-3 rounded relative"
  danger-class="bg-red-100 border-red-400 text-red-700"
  variant="danger"
  show
>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem possimus nihil minus rerum aperiam, quidem, reprehenderit! Atque, facere inventore nam suscipit, excepturi nesciunt incidunt, explicabo error molestiae iure optio enim.</p>
</t-alert>

# The result:

Error: Are you sure do you want to keep using Bootstrap?

Close

← Table →