Skip to content

mrastiak/vue-notification-bell

Repository files navigation

vue-notification-bell

vue-notification-bell

npm version

A Vue UI component for showing notifications. Demo Page

How To Install

npm install vue-notification-bell --save

How to use

Inside your vue files:

<template>
  <div id="your-component">
    <notification-bell />
    <!-- Using Component -->
  </div>
</template>
<script>
// Importing Component
import NotificationBell from 'vue-notification-bell'

export default {
  name: 'YourComponentName',
  // ...
  components: {
    NotificationBell // Registering Component
  }
  // ...
}
</script>

List of component props

⚠️ Warning: You have to v-bind custom icon path with require function:

v-bind:icon="require(@/assets/path/to/icon.svg)" ✔️

:icon="require(@/assets/path/to/icon.svg)" ✔️

icon="@/assets/path/to/icon.svg"

icon="require(@/assets/path/to/icon.svg)"

propName description Type default value
size size of component in px number 30
count number of notifications. (zero or below not shown) number 0
upperLimit if count is bigger than this number notification shown as +upperLimit number 99
counterLocation position of counter box in component. can be one of: upperRight, lowerRight, upperLeft, lowerLeft, top, left, bottom, right and center. If you set top or left prop, this prop will be disabled string upperRight
top If you want to set a custom location for counterBox, you can set top distance by this prop. You have to pass value with dimension (e.g. 10px or 20%). If you set this prop the counterLocation prop will be disabled null or string null (Location is calculated by counterLocation)
left If you want to set a custom location for counterBox, you can set left distance by this prop. You have to pass value with dimension (e.g. 10px or 20%). If you set this prop the counterLocation prop will be disabled null or string null (Location is calculated by counterLocation)
fontSize Custom font size for counter. You have to pass value with dimension. e.g. 20px or 1.5em null or string null (Font size is calculated by size)
counterPadding Custom padding for counter. You have to pass value with dimension. e.g. 20px or 1.5em null or string null (Padding is calculated by size)
icon custom notification icon. you have to pass your SVG icon location by require function null or string null (showing the default bell icon)
iconColor color of the bell icon. This property only works with default icon. if you are using custom icon, you have to handle color of the icon in your SVG file string black
disabledIcon If you want to show a different Icon when you have zero notification. you can use this prop. pass SVG icon location by require function. this prop only works if you are using custom icon too null or string null (showing the default bell icon)
counterStyle shape of counter box. can be one of: roundRectangle, rectangle, round string roundRectangle
counterBackgroundColor background color of counter box string red
counterTextColor counter text color string white
animated if true, counter increase/decrease by animation boolean false
ding if true, a ding sound is played on new notifications boolean false
prefixPlus if true, upper limit plus sign is shown as a prefix, otherwise it is shown as a postfix boolean false

Contributing

Visit CONTRIBUTING Page

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-bundle

Lints and fixes files

npm run lint

License

MIT