Complete implementation of a Vue UI component for showing notifications
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
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 |