komponents

todo: badges A collection of useful javascript web components to keep things clean

Features

• 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

Installing

Using npm:

$ npm install @rxsto/komponents

Using yarn:

$ yarn add @rxsto/komponents

More to come ...

Browser Support

| | | | | | --|--|--|--|--|--| latest ✔ |latest ✔ |not tested |latest ✔ |latest ✔ |not tested |

Usage

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 ...

Author

Oskar 'rxsto' Lang [email protected] (https://rxs.to)