gadget-ui

JavaScript UI and data binding library

Gadget-ui is a UI component library that has a built-in model and data-binding mechanism for some of its components.

Current Release

v 9.4.0

The Lightbox component has added an animate() method that switches to the next image in the array at a given interval time, imitating the functionality of an image carousel. Lightbox has also added a modal container that can show an image zoomed to 100% width on the page. Clicking on the image in the lightbox shows the modal. Clicking on the image modal hides the modal. This functionality can be deactivated with enableModal: false in the component options.

Installation

npm install gadget-ui

Including the library

The library can be included in traditional JavaScript form using a standard script tag:

<script src="/node_modules/gadget-ui/dist/gadget-ui.js"></script>

The library can also be included using module imports, which allows you to only import the components needed for a particular page:

import {lightbox, constructor} from "/node_modules/gadget-ui/dist/gadget-ui.es.js"

Instantiating Components

Use the constructor component to create new instances of a gadget-ui component, as so:

// traditional include
const lightbox = gadgetui.objects.Constructor( gadgetui.display.Lightbox, [ document.getElementById("lightbox"), 
  {images: imageArray, time: 3000, enableModal:false }], true );

// module import
const lightbox = constructor( lightbox, [ document.getElementById("lightbox"), 
  {images: imageArray, time: 3000, enableModal:false }], true );

Dependencies

Gadget-ui has an optional dependency on velocity-animate to animate transitions in the library. Transitions will be ignored if the library is not installed. All other dependencies are solely for development purposes of the library.

License

gadget-ui is released under the Mozilla Public License 2.0.