@aeternity/superhero-button
## Installation
Last updated 16 days ago by davidyuk .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @aeternity/superhero-button 
SYNC missed versions from official npm registry.

Superhero Button

Installation

You can get it as npm package or from the unpkg.com.

With npm

  • run $ npm install @aeternity/superhero-button --save in the root or your project
  • import this package by import superheroButton from '@aeternity/superhero-button';

With unpkg.com and <script> tag

Add this to your website's HTML:

<script src="https://unpkg.com/@aeternity/superhero-button@0.3.0/dist/superhero-button.styles.js"></script>

This will define superheroButton in the global scope.

With custom styles

You can import and process styles manually by importing dist/style.css and dist/superhero-button.js separately. Or even you can don't import styles at all, and write your own instead.

Usage

Button (superheroButton)

This library exports a function that creates buttons. This function accepts arguments:

  • class name of nodes that should become buttons, or the DOM node itself (this option simplifies integration into Frontend frameworks like Vue/React)
  • options object
Option Description
size Default icon. Possible values icon, large, medium, small. See the screenshots section below.
account Optional. When set you can easily claim your tips. Accepts account public key or name ending with .chain.
url Optional. Url to be tipped. Default is set to the current page url.

Example

<div class="my-button">Donate</div>
<script type="text/javascript">
  superheroButton('.my-button', {
    size: 'large',
    account: 'example.chain',
    url: 'https://example.com',
  });
</script>

Select the button style you like the most and adopt this code to your website's HTML. Additional examples can be found here.

Screenshots

Size value Screenshot
icon icon
small small
medium medium
large large

Paywall (superheroButton.ensurePayed)

This function asks the user to send a tip to the specified page. It won't ask to send a tip if it was sent before using the current browser. The function accepts options object.

Option Description
url Optional. Url to be required to pay for. Default is set to the current page url.

Example

<script type="text/javascript">
  superheroButton.ensurePayed({ url: 'https://example.com' });
</script>

Additional examples can be found here.

Screenshots

Paywall

Start the project for development

You need to install Node.js firstly.

$ npm install
$ npm start

Build for production

$ npm run build

Current Tags

  • 0.3.0                                ...           latest (16 days ago)

9 Versions

  • 0.3.0                                ...           16 days ago
  • 0.2.3                                ...           4 months ago
  • 0.2.2                                ...           4 months ago
  • 0.2.1                                ...           4 months ago
  • 0.2.0                                ...           5 months ago
  • 0.1.3                                ...           5 months ago
  • 0.1.2                                ...           5 months ago
  • 0.1.1                                ...           5 months ago
  • 0.1.0                                ...           5 months ago
Downloads
Today 0
This Week 0
This Month 27
Last Day 0
Last Week 9
Last Month 10
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |