mjo-button
v1.0.3
Published
Web components button
Maintainers
manujozReadme
<mjo-button>
Button component with some extra functionalities. The advantages of these components is that they do not need to be compiled. It uses a polymer library adapted to be used directly in the browser and takes advantage of the native webcomponents of the browsers.
Install
npm i mjo-button
Use
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<main>
<mjo-button unresolved>my button</mjo-button>
</main>
<script type="module" src="/node_modules/mjo-polymer/polymer/polymer-element.js"></script>
<script type="module" src="/node_modules/mjo-button/mjo-button.js"></script>
</body>
</html>View an example on CODESANDBOX
Api
Attribites
The component accepts the following properties:
Properties and Methods
Methods that can be called through javascript
Events
Component events are configured by passing the attribute the name of the function to be called for the specific event. Since these functions are called from a shadow-dom, for them to work the functions must be declared in a global scope. If you want to reference module methods or you are using the component inside another component, you need to make a global declaration of the function for it to work.
I put at your disposal a helper that makes this task much simpler and more intuitive. You can see the documentation here.
Styling
With the following CSS variables you can give the component a completely custom style.