Documentation

The library is minimally styled and limited in options. Below is the required HTML markup and Javascript needed to use each component. To alter the appearance, override the CSS with your own classes.

Accordion

Markup

The wrapper id of 'accordion' is required to be passed to the instance. The trigger class also requires a data-target attribute that corresponds to the id of the content class div.

Javascript

        
          const accordion = new Accordion('#accordion');
          accordion.init();
        
      

Popup

Markup

The ids and HTML markup are required as shown.

Javascript

The available options:

        
          const options = {
            maxWidth: '600px',
            opacity: '0.85'
          }

          const popup = new Popup('#popup-wrapper', options);
          popup.init();
        
      

Toast

Markup

The id 'toast-trigger' is required.

Javascript

Options for position include: top center, top left, top right, and bottom center, bottom left, bottom right. The available options for style are: alert, success, warn and info.

        
          const message = "Download Simple UI Kit as package on NPM!";

          const options = {
            style: 'success',
            position: 'top center',
            timeout: 4000
          }

          const toast = new Toast(message, options);
          toast.init();
        
      

Tooltip

What is a tooltip? Hover to find out.

Markup

The 'tooltip' class and data-message attribute are required.

Javascript

There is only one option for the tooltip and that is position. Values for position include: top, bottom, left and right.

        
          const tooltip = new Tooltip ('.tooltip', { position: 'right' });
          tooltip.init();
        
      

Tabs

Markup

The wrapper class 'tabs' is required to be passed to the instance. The trigger class also requires a data-target attribute that corresponds to the id of the content class div.

Javascript

        
          const tabs = new Tabs('.tabs');
          tabs.init();