A Beautiful, Responsive, Customizable, Accessible (Wai-Aria) Replacement For Javascript'S Popup Boxes.

1. Required Vendor files:

<link rel="stylesheet" href="sweetalert2.min.css">
<script src="sweetalert2.all.min.js"></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-sweet-alerts.css">

3. Initialization:

Swal.fire({
    title: 'Error!',
    text: 'Do you want to continue',
    type: 'error',
    confirmButtonText: 'Cool'
});

Refer following links for detailed documentation, configuration options, methods and examples:

Toastr is a Javascript library for Gnome/Growl type non-blocking notifications.

1. Required Vendor files:

<link rel="stylesheet" href="toastr.css">
<script src="toastr.min.js"></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-toastr.css">

3. Initialization:

// Display an info toastr with no title
toastr.info('Are you a 6 fingered man?')
// Display a success toastr with title
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort?')

Refer following links for detailed documentation, configuration options, methods and examples:

noUiSlider is a Javascript lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.

1. Required Vendor files:

<link rel="stylesheet" href="nouislider.min.css">
<script src="wNumb.js"></script>
<script src="nouislider.min.js"></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-nouislider.css">

3. Binding to existing DOM element.

<div id="slider"></div>

4. Initialization:

var slider = document.getElementById('slider');
noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

Refer following links for detailed documentation, configuration options, methods and examples:

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.

1. Required Vendor files:

<script src="dropzone.min.css"></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-upload.css">

3. HTML Markup

<form action="/file-upload" class="dropzone">
    <div class="dz-message">Drop Files Here To Upload</div>
</form>

Alternatively you can create dropzones programmatically (even on non form elements) by instantiating the Dropzone class.

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

// jQuery
$("div#myId").dropzone({ url: "/file/post" });

4. Initialization:

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    accept: function(file, done) {
        if (file.name == "justinbieber.jpg") {
            done("Naha, you don't.");
        }
        else { done(); }
    }
};

Notes

---

• If you do not want the default message at all (Drop files to upload (or click)), you can put an element inside your dropzone element with the class .dz-message and dropzone will not create the message for you.
• Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the params option.
• Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it’s an image, as well as file.upload which is an object containing: progress (0-100), total (the total bytes) and bytesSent.
• If you want to add additional data to the file upload that has to be specific for each file, you can register for the sending event:

  myDropzone.on("sending", function(file, xhr, formData) {
      // Will send the filesize along with the file as POST data.
      formData.append("filesize", file.size);
  });

• To access the preview html of a file, you can access file.previewElement. For example:

  myDropzone.on("addedfile", function(file) {
      file.previewElement.addEventListener("click", function() {
          myDropzone.removeFile(file);
      });
  });

• If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the previewsContainer option. The previewsContainer should have the dropzone-previews or dropzone class to properly display the file previews.

  new Dropzone(document.body, {
      previewsContainer: ".dropzone-previews",
      // You probably don't want the whole body
      // to be clickable to select files
      clickable: false
  });

Refer following links for usage:

Drag and drop so simple it hurts!

1. Required Vendor Files:

<link rel="stylesheet" href="dragula.min.css">
<script src='dragula.min.js'></script>

2. Initialization:

dragula([document.getElementById("left-group"), document.getElementById("right-group")]);

Refer following links for detailed documentation, configuration options, methods and examples:

Guide your users through a tour of your app.

1. Required Vendor Files

<link rel="stylesheet" href="shepherd.min.css">
<script src='shepherd.min.js'></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-tour.css">

3. Initialization

var tour = new Shepherd.Tour({
    defaultStepOptions: {
        classes: 'tour-container shadow-md',
        scrollTo: {
          behavior: 'smooth',
          block: 'center'
        }
    }
});

tour.addStep('example', {
    title: 'Example Shepherd',
    text: 'Creating a Shepherd is easy too! Just create ...',
    attachTo: {
      element: '.hero-example',
      on: 'bottom'
    },
    advanceOn: '.docs-link click'
});

tour.start();

Refer following links for detailed documentation, configuration options, methods and examples:

Simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

1. Required Vendor Files

<link rel="stylesheet" href="plyr.css">
<script src='plyr.min.js'></script>

2. Initialization

var player = new Plyr('.default-player');

Refer following links for detailed documentation, configuration options, methods and examples:

A tree view represents a hierarchical view of information, where each item can have a number of subitems.

1. Required Vendor Files

<link rel="stylesheet" href="bootstrap-treeview.min.css">
<script src='bootstrap-treeview.min.js'></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-treeview.css">

3. Dom Binding

<div id="default-treeview"></div>

4. Initialization

$('#default-treeview').treeview({
    selectedBackColor: [color],
    data: dataFunctionHere
});

Refer following links for detailed documentation, configuration options, methods and examples:

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

1. Required Vendor Files

<link rel="stylesheet" href="swiper.min.css">
<script src='swiper.min.js'></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-swiper.css">

3. Dom Binding

<div class="swiper-default swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slider 1 data</div>
        <div class="swiper-slide">Slider 2 data</div>
    </div>
</div>

4. Initialization

var mySwiper = new Swiper('.swiper-default');

Refer following links for detailed documentation, configuration options, methods and examples:

Clipboard is a manually created extension.

1. Dom Binding

<input type="text" class="form-control" id="copy-to-clipboard-input" value="Copy Me!">
<button class="btn btn-primary" id="btn-copy">Copy!</button>

2. Initialization

var userText = $("#copy-to-clipboard-input");
var btnCopy = $("#btn-copy");

// copy text on click
btnCopy.on("click", function () {
    userText.select();
    document.execCommand("copy");
});

Referrals :

Context Menu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible.

1. Required Vendor Files

<link rel="stylesheet" href="jquery.contextMenu.min.css">
<script src='jquery.contextMenu.min.js'></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-sweet-miscellaneous.css">

3. Dom Binding

<button class="btn btn-primary" id="basic-context-menu">Right click on me<button>

4. Initialization

$.contextMenu({
    selector: "#basic-context-menu",
    callback: function (key, options) {
        var r = "clicked " + key;
        window.console && console.log(r) || alert(r);
    },
    items: {
        "Option 1": {
            name: "Option 1"
        },
        "Option 2": {
            name: "Option 2"
        },
    }
});

Refer following links for detailed documentation, configuration options, methods and examples:

The idle timer is built on jQuery and provides two events: idle.idleTimer and active.idleTimer, which fire when the user's idle state has changed. When you move your mouse over the page or start typing, you're considered "active".

1. Required Vendor Files

<script src='idle-timer.1.1.0.min.js'></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-sweet-miscellaneous.css">

2. Initialization

$( document ).idleTimer( {
    timeout:10000,
    idle:true
});

Refer following links for detailed documentation, configuration options, methods and examples:

Numeral Js is a javascript library for formatting and manipulating numbers.

1. Required Vendor Files

<script src='numeral.min.js'></script>
<script src='locales.min.js'></script>

2. Initialization

$(".yourClassHere").text(numeral(1000.234).format("$0,0.000"));

Refer following links for detailed documentation, configuration options, methods and examples:

Often you need to add an user's avatar to your app. In order to make this we have the component. Note: You have to use inline attributes to set height & width of image in default avatar.

<div class="avatar">
    <span class="avatar-content">
        <i class="avatar-icon ft-github"></i>
    </span>
</div>

Below are the options that you can use with avatar.

Referrals :

A simple jQuery image cropping plugin.

1. Required Vendor Files:

<script src="cropper.min.js"></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="ex-component-image-cropper.css">

3. Dom Binding:

Note: Wrap the image or canvas element with a block element(container).

<div>
    <img id="image" src="picture.jpg">
</div>

Note: Limit image width to avoid overflow the container.

img {
    max-width: 100%; /* This rule is very important, please do not ignore this! */
}

4. Initialization:

var $image = $('#image');
$image.cropper({
    aspectRatio: 16 / 9,
    crop: function(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
    }
});
// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');

Refer following links for usage: