❤
npm
Sign UpSign In

rocket-button

6.2.1 • Public • Published

Rocket Button

A lightweight button module.

Getting Started

Install via NPM.

npm install rocket-button

NOTE that this module has a dependency Rocket Tools (28kb) which will automatically be installed as well.

CSS Implementation

Start by including the necessary files.

<head>
   <link href="node_modules/rocket-button/css/button.min.css" rel="stylesheet" type="text/css">
</head>

Now class your button and add a modifier to gain the desired effect. For example:

<button class="mod-button _mod-style-line-red _mod-size-large">Example Button</button>

There are a variety of options for the CSS modifiers.

Class Options Description
_mod-style-flat-(x) white grey black aqua blue green
orange pink purple red yellow		 Set the colour and style to flat.
_mod-style-gradient-(x) white grey black aqua blue green
orange pink purple red yellow		 Set the colour and style to gradient.
_mod-style-line-(x) white grey black aqua blue green
orange pink purple red yellow		 Set the colour and style to line.
_mod-size-(x) small normal large x-large Set the size of the the button.
_mod-shape-(x) rounded pill square Set the shape of the the button.

If no modifiers are provided then the colour will default to grey, the style to flat, the size to normal and the shape to rounded.

SASS Implementation

Instead of including the CSS file above, you can import the SASS file and create your own button styles. See an example below:

@import "node_modules/rocket-button/build/sass/import";
 
.btn-primary,
.btn-secondary {
   @include mod-button-setup;
   @include mod-button-shape(rounded);
   @include mod-button-size(normal);
}
.btn-primary {
   @include mod-button-style(line, black);
   @include mod-button-size(large);
}
.btn-secondary {
   @include mod-button-style(flat, white);
}

There are a variety of options for the SASS builds.

SASS Default Options Description
mod-button-setup Apply to all buttons.
mod-button-shape(x) rounded pill rounded square Set the shape of the button.
mod-button-size(x) normal small normal large x-large Set the size of the button.
mod-button-style(x, y) flat, white flat gradient line Set x to the style of button.
Set y to the colour.
mod-button-css(x) .mod-button Create styles for selector x.

Javascript Initialisation

If you want to enable button loaders or dropdowns then you will need to execute the following Javascript. Start by including the necessary files. By default the dropdown target option is set to .mod-button.

<body>
   <button id="button-loader" class="mod-button _mod-style-flat-blue">Button Loader</button>
 
   <div id="btn-primary" class="mod-button _mod-style-flat-blue">
      Drop Down Default<div class="mod-button-arrow"></div>
      <ul>
         <li><a href>Link 1</a></li>
         <li><a href>Link 2</a></li>
         <li class="mod-button-line-top"><a href>Link 3</a></li>
      </ul>
   </div>
 
   <!-- Include the scripts -->
   <script src="node_modules/rocket-tools/js/tools.min.js"></script> 
   <script src="node_modules/rocket-button/js/button.min.js"></script> 
   <script>
   // Loader
   Rocket.event.add('#button-loader', 'click', (event) => {
      Rocket.button.loader({
         element: event.currentTarget,
         parseEvent: event
      });
   });
 
   // Drop down
   Rocket.button.dropdown({
      target: '#btn-primary'
   });
</script> 
</body>

The button loader returns the element instance. You can modify the loader after that.

// Start the button loader
const btnLoader = Rocket.button.loader({
   target: '#button-loader'
});
 
// The button element
Rocket.log(btnLoader.button);
 
// Hide the loader
setTimeout(function () {
   btnLoader.hide();
}, 4000);

Each dropdown initialisation will return an array of module objects (An array will always be returned even if the target is an id). This includes the button element itself as well as relevant methods. For example:

// By default the target option is set to '.mod-button'
const buttons = Rocket.button.dropdown();
 
// The buttons and all methods
for (let i = 0, len = buttons.length; i < len; i++) {
   console.log(buttons[i].button);
   buttons[i].show(); // Show the button dropdown
   buttons[i].hide(); // Hide the button dropdown
}

Alternatively if you know the button target is unique you can reference the button right away with the 0 index. For example:

const myButton = Rocket.button.dropdown({
   target: '#my-button'
})[0]; // Reference the first item in the array right away.

Loader Options

Name Default Options Description
element Provide the button element to attach the loader to.
parseEvent Parse a click event to prevent the default action.
reveal appear appear slide-down slide-up Set the loader reveal.
timeout 0 Set the timeout of the loader (in seconds).
0 is infinite.

Defaults

You can also overwrite the module target option globally by altering the Rocket defaults. To do so reference the defaults object property, for example:

Rocket.defaults.button.loader.reveal = 'slide-up';
Rocket.defaults.button.dropdown.target = '.new-button-class';

Buttonplate Deprecated

The original library, Buttonplate, has been deprecated. The entire Webplate project is being refactored and rebranded with a new development philosophy. Buttonplate will be maintained only with bug fixes under the buttonplate branch.

Author

Created and maintained by Chris Humboldt
Website: chrishumboldt.com
Twitter: twitter.com/chrishumboldt
GitHub github.com/chrishumboldt

Copyright and License

Copyright 2018 Rocket Project

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Readme

Keywords

Package Sidebar

Install

npm i rocket-button

Repository

github.com/chrishumboldt/Rocket-Button

Homepage

github.com/chrishumboldt/Rocket-Button#readme

Weekly Downloads

2

Version

6.2.1

License

Apache-2.0

Last publish

Collaborators

  • chrishumboldt
Try on RunKit
Report malware