Alert

Hi, I am an alert!

Basic Info

A Vue component for displaying alerts. Useful for showing important temporary information to the user. Dismissable with the 'x' fontawesome button.

Props

Prop Type Description
borderColor String Color of the border. Accepts any standard CSS format (hex, rgba)
backgroundColor String Color of the background. Accepts any standard CSS format (hex, rgba)
textColor String Color of the text. Accepts any standard CSS format (hex, rgba)

Example

<Alert borderColor="#46bd87" backgroundColor="#46bd87" textColor="#fff">Hi, I am an alert!</Alert>

Source

<template>
  <div class="alert" v-if="show" v-bind:style="{ borderColor: borderColor, backgroundColor: backgroundColor, color: textColor }">
    <div class="alert-content">
      <slot></slot>
    </div>
    <span @click="show=false" class="close">
      <font-awesome-icon :icon="times" />
    </span>
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faTimes } from '@fortawesome/free-solid-svg-icons'

export default {
  name: 'Alert',
  components: {FontAwesomeIcon},
  props: {
    borderColor: String,
    backgroundColor: String,
    textColor: String,
  },
  data() {
    return {
      show: true,
      times: faTimes,
    }
  }
}
</script>

<style lang="scss" scoped>
.alert {
  padding: 10px;
  display: flex;
}

.alert-content {
  flex-grow: 1;
}

.close {
  cursor: pointer;
}
</style>