A Vue.js UI component for showing notifications
A Vue UI component for showing notifications. Demo Page
```
npm install vue-notification-bell --save
Inside your vue files:
`vue`
:warning: Warning: You have to v-bind custom icon path with require function:
v-bind:icon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:
:icon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:
icon="@/assets/path/to/icon.svg" :x:
icon="require(@/assets/path/to/icon.svg)" :x:
| 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 |
Visit CONTRIBUTING Page
``
npm run serve
``
npm run build-bundle
```
npm run lint
MIT