Button
Synopsis
A button implementation to handle user events.
Setup and install
npm install ak-button
Using the component
HTML
This package exports the ak-button
skate component.
Import the component in your JS resource:
bundle.js
import AkButton from 'ak-button';
Now we can use the defined tag in our HTML markup, e.g.:
index.html
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-button>testing</ak-button>
</body>
React
import AkButton from 'ak-button';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(AkButton, {});
ReactDOM.render(<ReactComponent />, container);
Vanilla JS
It can be used as a Constructor:
import AkButton from 'ak-button';
const myButton = new AkButton();
myButton.innerHTML = 'testing' // renders <ak-button>testing</ak-button>
document.body.appendChild(myButton) // Needed to be attached to the DOM to be rendered
Or nested inside skate elements, e.g.:
import 'ak-button';
const { vdom, define } = skate;
const { element } = vdom;
const MyButton = define('my-elem', {
render() {
element('ak-button', () => {
vdom.text('My Button');
});
}
});
document.body.appendChild(new MyButton()) // renders <ak-button>My Button</ak-button>