Template
A beautiful button that can make your life easier and also looks good.
import { Button } from "@schukai/monster/source/components/form/button.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Introduction
This is the Monster Button web component. More than just a button, this component is the gateway to an interactive and engaging user experience that integrates seamlessly into various web applications. Whether you are developing a simple website or a complex enterprise application, the Monster Button is designed to increase user interaction and satisfaction.
Key Features
- Dynamic interaction: Users can interact with content dynamically, making the Web experience more intuitive and user-centric.
- Customizable appearance: Customize the appearance of the button to match the design of your brand or application to improve visual consistency.
- Accessibility: Designed with accessibility in mind to ensure all users have a seamless experience regardless of their browsing context.
- Ripple effect: A subtle touch feedback effect that enhances tactile interaction with the button and makes users' actions more enjoyable.
- Programmatic Control: Provides methods such as click, focus, and blur to programmatically control the behavior of the button, giving developers flexibility.
Improving the user experience
The Monster Button goes beyond the traditional functions of a button to provide an enhanced and interactive user experience. Its ripple effect combined with dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.
These improvements are supported by user studies that show a positive impact on user commitment and satisfaction.
Efficiency in the development process
Integrating the Monster Button into your development process is easy. Its compatibility with standard web technologies and ease of customization allow for seamless integration with your existing tools and libraries. Whether you are working on a small project or a large application, Monster Button's modular design guarantees easy integration that streamlines your development process and increases your productivity.
Button Simple
This is a simple button example. It is a button with the text "click me!". Nothing more, nothing less.
Javascript
import "@schukai/monster/source/components/form/button.mjs";HTML
<monster-button>click me!</monster-button>Stylesheet
/** no additional stylesheet is defined **/Button With Click Event
This is a simple button example with click handling. It is a button with the text "click me!". When you click on the button, the text "Button clicked!" will be displayed below the button. The text will be removed after 2 seconds.
You can either attach a classic event handler to the element, or you can use the actions.click option.
Javascript
import "@schukai/monster/source/components/form/button.mjs";HTML
<monster-button id="eeSh6A-button">click me!</monster-button>
<div id="eeSh6A-result" style="margin-top: 20px;display: flex;align-items: center;justify-content: center;">
</div>
<script>
// watch for the DOMContentLoaded event
window.addEventListener('DOMContentLoaded', function () {
// get the button element and set a click event callback
document.getElementById('eeSh6A-button').setOption("actions.click", function () {
// set a text to the result element
document.getElementById('eeSh6A-result').innerHTML = 'Button clicked!';
// Reset the result after 2 seconds.
// This is only there so that you can click more often.
setTimeout(function () {
document.getElementById('eeSh6A-result').innerHTML = '';
}, 2000);
});
});
</script>Stylesheet
/** no additional stylesheet is defined **/HTML Structure
<monster-button></monster-button>JavaScript Initialization
const element = document.createElement('monster-button');
document.body.appendChild(element);Exported
ButtonOptions
Properties and Attributes
data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.data-monster-option-[name]: Sets the value of the configuration option[name]for the collapse component when used as an HTML attribute.
Methods
Static methods
formAssociated()- {boolean}
getCSSStyleSheet()- {CSSStyleSheet[]}
getTag()- {string}
instanceSymbol()2.1.0- {symbol}
instanceof operator.observedAttributes()- {string[]}
attributeChangedCallback().Lifecycle methods
assembleMethodSymbol()- {Button}
Other methods
blur()click()3.27.0Button.click() method simulates a click on the internal button element.focus(options)3.27.0options{object}: options
value()- {string}: value of the button
e = document.querySelector('monster-button');
console.log(e.value)
value(value)value{string}: value
- {void}
{Error}unsupported type
e = document.querySelector('monster-button');
e.value=1
Events
The component emits the following events:
monster-button-clickedthis event is triggered when the button is clicked. It contains the field {button} with the button instance.
For more information on how to handle events, see the mdn documentation.