1.0.1 • Published 2 years ago
@default-js/defaultjs-html-button v1.0.1
defaultjs-html-button
Intro
This a web component can transform your buttons and links into an interactive element, with less or even no programming effort.
How to include
NPM
//import html renderer element
import { HTMLDefaultjsAnchorElement, HTMLDefaultjsButtonElement } from "@default-js/defaultjs-html-button"Script Tag
<html>
<head> ...</head>
<body>
<style>
#target:not(.show) { display: none;}
</style>
<a is="d-button" type="toggle-class" class-value="show" selector="#target">toggle class "show" by link</a>
<button is="d-button" type="toggle-class" class-value="show" selector="#target">toggle class "show" by button</button>
<div id="target">visible</div>
//script file is located at dist directory
<script type="module" src="browser-defaultjs-html-button.min.js" />
</body>
</html>How to use
Define a button or a tag and use the is attribute with the value d-button. You must define the type attribute and choose between delegate, toggle-class, toggle-attribute, call-renderer, render to specify what kind of action would be executed.
<a is="d-button" type="[delegate | toggle-class | toggle-attribute | call-renderer | render]">link</a>
<button is="d-button" type="[delegate | toggle-class | toggle-attribute | call-renderer | render]">button</button>For the correct execution it is necessary to define additional attributes depending on the type.
Overview of all Attributes
| Attribute | required at type | Description |
|---|---|---|
type | delegate, toggle-class, toggle-attribute, call-renderer, render | |
event-name | delegate | define the event to be trigger |
class-name | toggle-class | define the class to be toggle |
attribute-name | toggle-attribute | define the attribute to be toggle |
detail | delegate | detail value for an delegated event |
template | render | define the template to be render. Further information at defaultjs-template-language |
render-mode | render | replace, append, prepend. Default: replace (for further information read defaultjs-template-language) |
selector | define a selector to specify elements on which the action is to be performed. Default: the button or a it self. Can be defined on any type. | |
context | define json object, which be used to evaluate the value of the most attributes. The most attributes can be dynamic. Can be defined on any type. Further information at defaultjs-expression-language |