valle-mixinButton

Awesome valle-mixinButton for Polymer 3 elements

What is?

A class expression mixin is basically a function that operates as a class factory. You pass in a superclass, and the function generates a new class that extends the superclass with the mixin's methods.

See polymer mixins docs.

or only...

Allows to share behaviors (like methods and properties) between different elements.

Basic usage

How to install and use:

1 - Install the element using Yarn:

$ yarn add @valle/valle-mixinButton

2 - Import the element:

<script type="module" src="node_modules/@valle/valle-mixinButton/valle-mixinButton.js"></script>

or in your javascript file

import { valleMixinButton } from '@valle/valle-mixinButton/valle-mixinButton.js';

3 - Start using it!

class myButton extends valleMixinButton(PolymerElement) {
};

Full Example:

import { valleMixinButton } from '../../valle-mixinButton.js';
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

class myButton extends valleMixinButton(PolymerElement) {
  static get template() {
    return html`
      <template>
        <slot></slot>
      </template>
    `
  }
};

window.customElements.define('my-button', myButton);

valle-mixinButton

All behaviors of a normal button plus the characteristics of a toggle button.

• Set all necessary aria attributes (ex: role = "button"), and controls all states changes (aria-pressed and aria-disabled).
• Control when the button should receive focus or not via tabIndex.
• Control pointer-events CSS state when necessary.
• Add keyboard (SPACE and ENTER) power for dispatch actions.

Properties provided

Property | Type | Default | Description :--- |:--- |:--- |:--- disabled | Boolean | false | Allow disabled state toggle | Boolean | false | Allow toggle mode pressed | Boolean | false | Set the pressed state (toggled)

View all methods, listeners, properties, etc...

Browser Support

Using the webcomponents.js:

| | | | | | :---: | :---: | :---: | :---: | :---: | :---: | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔

Development

1 - Verify if you have node and yarn installed.

2 - Install Polymer-CLI:

$ [sudo] yarn global add polymer-cli

3 - Install local dependencies:

$ yarn

4 - Start the development server:

$ yarn start

Versioning

To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.

Contributing

Find on our issues the next steps of the project ;) Want to contribute? Follow these recommendations.

History

See Releases for detailed changelog.

License

MIT License © valleweb