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>