# Alert

A simple component for notifiying users of specific information. Good for informative snippets, error messages, and more. It can be shown or hidden dynamically, and even supports auto-hiding after a given time.

Features:

  • Includes ARIA role="alert" attribute
  • Option for dismiss button
  • Option for timeout

# Installation

Globally:

// main.js
import Vue from 'vue';
import { VAlert } from 'vuetensils/src/components';

Vue.component('VAlert', VAlert);

Locally:

<script>
// SomeComponent.vue
import { VAlert } from 'vuetensils/src/components';

export default {
  components: {
    VAlert,
  },
  // ...
};
</script>

# Styled Examples

.vts-alert.error {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 10px;
  color: #900;
  background: #FDD;
}
.vts-alert.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 10px;
  color: #009;
  background: #DFF;
}

.vts-alert.info .vts-alert__dismiss {
  border: 0;
  font: inherit;
  background: transparent;
}

# Unstyled Examples

# Using v-model

With v-model, you can toggle an alert on or off.

# Dismissible

Allow users to hide an alert

You can provide your own content for the dismiss button with the dismiss slot.

# Countdown

It also supports providing seconds to the visible prop (or v-model) so the alert will hide after a short time.

# Transitions

.fade-enter-active,
.fade-leave-active {
  transition: 0.5s ease opacity;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

# Custom Classes

This component can accept a classes prop to cusomize the output HTML classes:

:classes="{ root: 'root-class', dismiss: 'dismiss-class' }"
Last Updated: 7/7/2020, 10:03:39 PM