vue-notification-bell
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
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