0.0.3 • Published 6 years ago

basket-element v0.0.3

Weekly downloads
6
License
MIT
Repository
github
Last release
6 years ago

<basket-element>

Custom element basket with counter.

Installation

$ npm install basket-element

Usage

import "basket-element"
<basket-element value="1" href="/cart">
  <span>0</span>
  <svg></svg>
</basket-element>

Method

Method the <basket-fragment> element.

  • value - Set or get counter.
  • increment - Increment counter.
  • decrement - Decrement counter.
const loader = document.querySelector("basket-element")
const counter = loader.value // get current counter
loader.value = 5 // set counter
loader.increment() // Increment counter. loader.value return 6
loader.decrement() // Decrement counter. loader.value return 5

Options

AttributeOptionsDescription
valuevalue counterdefault '0'
hrefif element as linkif element as link set role="link" add event to click
rolerole for elementSetup custom role element
aria-labelaria-label for elementDefault 'basket'
messagetemplate for span aria-labelexample: "In basket {{#}} items", default: "In basket"

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer 11
  • Microsoft Edge

Development

npm install
npm test
npm test-watch

License

Distributed under the MIT license. See LICENSE for details.