New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@agilie/action-button

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@agilie/action-button

Action button for user interactions

0.1.3
latest
Source
npm

Version published: 6 years ago

Weekly downloads: 12; increased by33.33%

Maintainers: 2

Weekly downloads

Created: 6 years ago

Source

Agilie/Action-button

This is fixed floating action button.

Install

From CDN:

  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/css/main.css"></script>
  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/js/common.js"></script>

From Git Repository:

$ git clone https://github.com/agilie/action-button.git

From NPM:

$ npm install @agilie/action-button

Usage

From CDN:

<head>
  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/css/main.css"></script>
  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/js/common.js"></script>
</head>
<body>
  <div class="wrap" id="js-btn-wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

var elemsWrap = document.getElementById('js-btn-wrap');
var actionBtn = new ActionBtn(elemsWrap);

From Git Repository:

```

var elemsWrap = document.getElementById('js-btn-wrap');
var actionBtn = new ActionBtn(elemsWrap);

From NPM: import our package from your module bundler (webpack)

var actionBtn = require('@agilie/action-button');

As a result:

  <div class="addBtn__wrapper" style="width: 80px; height: 80px;">
    <div class="wrap addBtn__wrap" id="js-btn-wrap" style="width: auto; height: auto;">
      <button class="addBtn addBtn--close" type="button" style="width: 80px; height: 80px; background-color: rgb(249, 180, 120); animation-iteration-count: 3;"></button>
      <div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(117, 174, 253); transition-delay: 0s; transition-duration: 0.8s; transform: translate(0px);"></div>
      <div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(247, 113, 109); transition-delay: 0.5s; transition-duration: 0.8s; transform: translate(0px);"></div>
      <div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(251, 213, 112); transition-delay: 1s; transition-duration: 0.8s; transform: translate(0px);"></div>
    </div>
  </div>

Examples

Base usage

  <div class="wrap" id="js-btn-wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <script type="text/javascript">
    var elemsContainer = document.getElementById('js-btn-wrap');
    var instances = new ActionBtn(elemsContainer);
  </script>

Contact us

If you have any questions, suggestions or just need a help with web or mobile development, please email us at web@agilie.com. You can ask us anything from basic to complex questions.

We will continue publishing new open-source projects. Stay with us, more updates will follow!

Keywords

FAQs

What is @agilie/action-button?

Is @agilie/action-button popular?

Is @agilie/action-button well maintained?

Package last updated on 27 Dec 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install