ui-btn

Universal button for web UI

Installation

$ npm install ui-btn --save-dev

Usage

const Button = require('ui-btn');
const options = {
  // Set up options here (see below)
};
 
const saveBtn = new Button(options);
someContainerElement.appendChild(saveBtn.element);
firstNameField.disable();

Options

Type: {Object}

type

Type: {String}

Type of the button: primary, secondary.

Default: primary.

titles

Type: {Array<String>}

A set of button titles. The first title in the array is initially displayed.

icon

Type: {String}

A name of the icon to be displayed on the button. If omitted, no icon is displayed.

Icon names:

• save
• delete
• forward
• back

iconPosition

Type: {String}

• left - the icon is displayed on the left;
• right - the icon is displayed on the right.

Default: left.

containsProgress

Type: {Boolean}

If set to true, the button will display progress state when clicked. Default: false.

isInitiallyEnabled

Type: {Boolean}

If set to false, the button is initially displayed in its disabled mode. Default: true.

isInitiallyShown

Type: {Boolean}

If set to false, the button is not initially displayed. Default: true.

tabindex

Type: {Integer}

If this property is provided and holds a positive integer, the button DOM node requires tabindex attribute.

onClick

Type: {Function | Array<Function>}

A function(s) to be invoked when the button is clicked.

onClick() - no parameters passed.

API

Properties

element

Type: {HTMLElement}

Returns reference to the DOM node created by the constructor.

titles

Type: {Array<String>}

Returns an array of available button titles.

Methods

enable()

Return: {undefined}

disable()

Return: {undefined}

show()

Return: {undefined}

hide()

Return: {undefined}

hideProgress()

Return: {undefined}

setTitle(val)

Sets the current title of the button.

Parameters:

• {Int|String} val - index in the title array returned by the titles property or a new or existing title. If a new title is provided, it is displayed and added to the titles property.

Return: {undefined}