Kaomos-button NPM

Installation

Via npm

npm i kaomos-button

Or via manual download

Include

As ES6 module

import 'dist/buttons.min.js'

As file include

<script src="dist/buttons.min.js"></script>

Usage

Create an instance:

<kaomos-button 
    label='Download' loader-speed='2' loader-size='60'
    loader-color='#fff' loader-width='4'>
</kaomos-button>

You could create an instance programmatically as well:

const btn = document.createElement('kaomos-button')
btn.setAttribute('label', 'Download')
document.body.appendChild(btn)

There are following attributes to customize the button:

Attribute	Type	Default	Description
Label	String	'Your label'	Sets the buttons label (required)
loader-color	String	'#ffffff'	Loader color (any css valid color definition)
loader-size	Number	60	Loader size relative to the buttons height (in %)
loader-speed	Number	2.5	Loading animation speed (in s per turn)
loader-width	Number	4	Loader width (in px)

CSS

Customize the button with CSS however you want:

kaomos-button{
    width: 180px; /* Required */
    height: 40px; /* Required */
    background-color: rgb(80, 92, 255);
    color: rgb(209, 209, 209);
    font-size: 12px;
    letter-spacing: 5px;
    font-size: 7px;
    text-transform: uppercase;
    border-radius: 50px;
}

JavaScript

Start by getting the buttons instance:

const btn = document.getElementsByTagName('kaomos-button')[0]

Control the loading animation:

// Start the loading animation
btn.start()

// Stop the loading animation
btn.stop()

// Toggle the loading animation
btn.toggle()

Check if the button is running:

btn.isRunning() // returns a boolean value

Update internal variables after manipulating instance trough CSS animations for example:

btn.update()

Browser Support

Note: as a webcomponent this project uses technologies that are not widely supported. In order to provide wider browser support use this amazing polyfill.

This project has been tested successfully in the newest versions of Chrome and Firefox.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

@everything-registry/sub-chunk-2004 @zalastax/nolb-kao @infinitebrahmanuniverse/nolb-kao

5 years ago

5 years ago

5 years ago

5 years ago