@elmorec/ghoul v0.2.0

Lightweight Web UI Component

Component

Usage

import { bootstrap, toast, Modal, Tab, Collapse, Marquee } from '@elmorec/ghoul';

Auto bootstrap

bootstrap();

Modal

let modal = new Modal({
  title: 'here!',
  content: 'This is an alert Modal!',
  className: 'modal modal-danger',
  event: 'touchstart', // Default `click`
  anchor: document.querySelecotr('#alertModal'), // Trigger element
  close: true,   // Close button, default `false`
  onopen: null,  // On open event callback
  onclose: null, // On close event callback
  animate: true, // Apply animation, default `true`
  setTransformOrigin: true, // Default `false`
  buttons: [{
    text: 'Yeah', // Button text
    className: 'btn btn-danger',
    href: 'http://somewhere.com'
  }, {
    text: 'Nope',
    callback: function() {
      this.close();
    }
  }]
});

modal.open();
modal.close();
modal.destory();

Toast

toast('here!');

toast({
  text: '<img src="dragon.png">',
  className: 'my-toast',
  duration: 1000,
  mask: false,
  unsafe: false
});

Tab

<div id="myTab">
  <nav data-nav> <!-- Hook for nav -->
    <a>tab 1</a>
    <a>tab 2</a>
    <a>tab 3</a>
  </nav>
  <content data-content> <!-- Hook for content -->
    <article>content 1</article>
    <article>content 2</article>
    <article>content 3</article>
  </content>
</div>

new Tab(document.querySelector('#myTab'), {
  className: 'my-tab',
  event: 'touchstart', // Tab event type, default `click`
  index: 0             // Default active tab, default `0`
});

Collapse

<div id="myCollapse">
  <section>
    <header>title 1</header>
    <article>content 1</article>
  </section>
  <section>
    <header>title 2</header>
    <article>content 2</article>
  </section>
  <section>
    <header>title 3</header>
    <article>content 3</article>
  </section>
</div>

new Collapse(document.querySelector('#myCollapse'), {
  className: 'my-collapse',
  accordion: false,
  event: 'touchstart', // Collapse event type, default `click`
  index: 0        // Default active collapse, set to `false` to collapse all, default `false`
});

Marquee

<section id="myMarquee">
  <ul>
    <li>to make the world a better place</li>
    <li>time shift, man</li>
  </ul>
</section>

new Marquee(document.querySelector('#myMarquee'), {
  className: 'my-marquee',
  speed: 200,
  delay: 1000,
  animationFn: 'Linear' // Animation function, default `Linear`
});

Change log

• v0.2.2 fix keyframes name issue

License

MIT