Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wandersonalves/vue-shadow-badge
:moon: Simple badge directive using shadow-dom (with fallback)
https://github.com/wandersonalves/vue-shadow-badge
badge css pseudo-elements shadow-dom vue
Last synced: 1 day ago
JSON representation
:moon: Simple badge directive using shadow-dom (with fallback)
- Host: GitHub
- URL: https://github.com/wandersonalves/vue-shadow-badge
- Owner: WandersonAlves
- License: mit
- Created: 2018-06-19T20:39:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T09:45:36.000Z (almost 2 years ago)
- Last Synced: 2024-04-29T18:08:40.439Z (5 months ago)
- Topics: badge, css, pseudo-elements, shadow-dom, vue
- Language: JavaScript
- Homepage: https://wandersonalves.github.io/vue-shadow-badge/
- Size: 1.85 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-shadow-badge!
[](https://github.com/WandersonAlves/vue-shadow-badge/stargazers)
[](https://github.com/WandersonAlves/vue-shadow-badge)
## DEPRECATED
element.createShadowRoot is [DEPRECATED](https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot), and using [element.attachShadow](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow) don't seens to work on the examples. Using fallback currently works (for anyone willing to study this directive). And Vue 3 is close to be released, so, this directive will not receive any update from me. Thanks!
## Instalation
Use `yarn add vue-shadow-badge` or `npm i --save vue-shadow-badge`
## Motivation
In my search for badges, i only found component based badges, for me, this isn't the ideal, so a build a directive based badge that is extensible and highly configurable.
With shadow-dom is easy to create pseudo-elements in any element with a shadowRoot, just look at `src/directives/Badge/utils/shadow-dom.js`.
Sadly, shadow-dom isn't supported in all browsers, so keep in mind this.
https://caniuse.com/#feat=shadowdom
### But...
Now this directive have a fallback for browsers without shadow-dom. If you encounter something strange, please let me know it.
___
## Usage
Simple import globally or locally in your vue app.
Locally:
```
//SomeComponent.vue
import Badge from 'vue-shadow-badge';
export default {
directives: {
Badge
}
}
```
Global:
```
//main.js (or another entry point)
import Vue from 'vue';
import App from './App.vue';
import Badge from 'vue-shadow-badge';
new Vue({
render: h => h(App),
directives: {
Badge
}
}).$mount('#app')
```
Now you can use your new directive like this:
`
Examples
`
or this:
`Hi!`
or even this:
``
___
`badgeConfig` accept some values:
| Prop | Type | Description |
|--------|--------|-----------------------------------------|
| value | number | Sets the value on Badge |
| right | string | Set the right value for badge placement |
| left | string | Set the left value for badge placement |
| down | string | Set the down value for badge placement |
| up | string | Set the up value for badge placement |
| styles | string | Customize your badge! (see above) |
___
## Examples
```
export default {
data() {
return {
badgeConfig: {
value: 2,
right: '-20px',
top: '-4px'
},
buttonBadgeStyle: `
border: 2px solid #662a24;
color: #662a24;
background-color: transparent;
font-size: 0.9em;
`
}
}
}
}
```
You can use `styles` prop to set the positioning of the badge too! Just use `right|top|bottom|left: value`
## Contributing
This is a beginner friendly open source project. Submit your PR, let's discuss some improvements.