@piyoppi/counter-button v0.1.4

@piyoppi/counter-button

Custom elements that increment counts, display counts.

This elements call API provided by @piyoppi/counter-api. The API must be deployed previously.

Install

To get packages from github package registry, you should edit .npmrc file. Show an example below. (authToken must have the read:packages scope. ref)

//npm.pkg.github.com/:_authToken=xxxxxxxx
@piyoppi:registry=https://npm.pkg.github.com

npm install --save @piyoppi/counter-button

Example

Displays the count of the page on which this element is placed. It also places a vote button.

<counter-container
  apiurl="https://api.example.com"
  >
  <counter-increment-button>
    <span>
      &#x1f31f;
      <counter-display>
        <span slot="loading">...</span>
      </counter-display>
    </span>
  </counter-increment-button>
</counter-container>

counter-increment-button

The button is used to increment the counter. The API (POST /count) is called when the button is clicked.

Attributes

counter-display

The element displays the counted value. The API (GET /current) is called when the element is shown.

Attributes

Slots

counter-container

This element integrates counter-increment-button and counter-display.

• Attribute apiurl and url on this element is applied in the child elements.
• When the counter display button in this element is clicked, the attribute addition is incremented by the counter-display.

Attributes