Overview

smartButton represents a simple button that can be clicked.

To initialize a button element the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • smart.element.js – the base class
  • smart.button.js – the JS file containing the element definition

The following code adds a simple button to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> </head> <body> <smart-button>Click Me</smart-button> </body> </html>

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Demo

Appearance

If the user wants to change the content of the button, this can be accomplished by setting the innerHTML property of the element, like so:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script> window.onload = function () { document.querySelector('smart-button').innerHTML = 'Button 1'; } </script> </head> <body> <smart-button>Click Me</smart-button> </body> </html>

Using the innerHTML property the user can change the content of the element dynamically as well.

Demo

Behavior

By default the innerHTML of the button is an empty string.

The element offers multiple click modes:

  • hover
  • press
  • release
  • pressAndRelease

clickMode is a property of the button that can be changed either from the HTML tag by setting the attribute click-mode and assigning a new value to it or by following the earlier approach and change it dynamically via javascript during the onload stage of the window object or later.

Here’s how to set a new click mode on element initialization:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> </head> <body> <smart-button click-mode="release">Click Me</smart-button> </body> </html>

Demo

And here’s how to change it via javascript after the element has been initialized:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script> window.onload = function () { document.querySelector('smart-button').clickMode = 'pressAndRelease'; } </script> </head> <body> <smart-button>Click Me</smart-button> </body> </html>

Demo

Keyboard Support

Smart.Button follows HTML button’s keyboard navigation behavior. This means that the button can be selected using Space. The element is focusable and can be focused using the Tab button.