A collection of useful javascript web components to keep things clean
- Useful and extensive collection of UI elements
- Save lines of code and time
- Initialize multiple events with the same type per element
- Commercially usable in closed source projects
Using npm:
$ npm install @rxsto/komponents
Using yarn:
$ yarn add @rxsto/komponents
More to come ...
latest ✔ | latest ✔ | not tested | latest ✔ | latest ✔ | not tested |
Button Nuxt.js: (https://nuxtjs.org)
<template>
<div class="index">
<button id="btn">
Click
</button>
<button id="clr">
Clear
</button>
</div>
</template>
// Import class Button
import { Button } from '@rxsto/komponents'
export default {
// Execute code on mount
mounted () {
// Create new instance of Button by passing the corresponding id (btn, clr)
this.btn = new Button('btn')
// Add new EventListener with name 'click_red_bg', type 'click' and callback 'makeRed()'
this.btn.add('click_red_bg', 'click', makeRed)
// Add a second EventListener with direct function call
this.btn.add('click_alert', 'click', event => alert('This is an alert!'))
// Create second instance of Button
this.clr = new Button('clr')
// Add new EventListener with direct function call and edit the document body
this.clr.add('click_clear_bg', 'click', (event) => {
document.body.style.background = 'white'
})
// Dispatch a click event
this.btn.dispatch(new Event('click'))
// Remove the EventListener with the name 'click_red_bg'
this.btn.remove('click_red_bg')
},
methods: {
// Function used for callback above
makeRed () {
document.body.style.background = 'red'
}
}
}
More to come ...
Oskar 'rxsto' Lang [email protected] (https://rxs.to)