@agilie/action-button
Advanced tools
This is fixed floating action button.
<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>
$ git clone https://github.com/agilie/action-button.git
$ npm install @agilie/action-button
<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);
var elemsWrap = document.getElementById('js-btn-wrap');
var actionBtn = new ActionBtn(elemsWrap);
var actionBtn = require('@agilie/action-button');
<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>
<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>
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!
FAQs
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.
Product
Socket now lets you customize pull request alert headers, helping security teams share clear guidance right in PRs to speed reviews and reduce back-and-forth.
Product
Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware supply chain checks.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.