Documentation v1.0.6

Preview Upgrade to Pro

Overview

Swapper is an exclusive component of Jet HTML Free that provides a simple and elegent solution to re-position HTML elements based on specific screen breakpoints.

Usage

Swapper's Javascript bundles are globally included in all pages.
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>

Initializationw

  • Swapper is initialized by adding data-kt-swapper="true" to the root of the HTML that will be swapped positions.
  • Add data-kt-swapper-mode="prepend" to the root HTML element to configure if the swapped element would be appended or prepended within the parent.
  • Add data-kt-swapper-parent="{default: '#parent_container_1', lg: '#parent_container_2'}" to identify the parent containers that the swapping component will be added into based on Bootstrap's breakpoint sizes.
  • Swapper instances can also be controlled programmatically. See below for more info.

Basic Example

Here's a basic example of Swapper. Try the demo below by adjusting your browser width.
All child elements within the Swapper component will also swap parents.
Parent Element 1
This HTML element will swap parent elements on different screen breakpoints
Parent Element 2
Parent Element 3
Parent Element 4
<div class="row g-10">
    <div class="col-lg-6">
        <div class="bg-light-primary h-100 p-5" id="kt_docs_swapper_parent_1">
            <div class="fw-boldest">Parent Element 1</div>

            <!--begin::Swapper-->
            <div class="mt-3"
                data-kt-swapper="true"
                data-kt-swapper-mode="append"
                data-kt-swapper-parent="{
                    default: "#kt_docs_swapper_parent_4", 
                    md: "#kt_docs_swapper_parent_3",
                    lg: "#kt_docs_swapper_parent_2",
                    xl: "#kt_docs_swapper_parent_1"
                }">
                This HTML element will swap parent elements on different screen breakpoints
            </div>
            <!--end::Swapper-->
        </div>
    </div>
    <div class="col-lg-6">
        <div class="bg-light-info h-100 p-5" id="kt_docs_swapper_parent_2">
            <div class="fw-boldest">Parent Element 2</div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="bg-light-warning h-100 p-5" id="kt_docs_swapper_parent_3">
            <div class="fw-boldest">Parent Element 3</div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="bg-light-success h-100 p-5" id="kt_docs_swapper_parent_4">
            <div class="fw-boldest">Parent Element 4</div>
        </div>
    </div>
</div>

Markup Reference

Swapper uses HTML attributes to set specific configurations. Here are the references for each below
HTML Attribute references
Name Type Description
data-kt-swapper mandatory Enables the current element as the Swapper component. Accepts true or false values.
data-kt-swapper-mode optional Defines the re-positioning method. Accepts append or prepend. Defaults to append.
data-kt-swapper-parent mandatory
Defines the parent element to be swapped into at specific Bootstrap breakpoints. This is compatible with Bootstrap's standard breakpoint sizing (eg: sm, md, lg, xl) with a similar px values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.
For example: {default: '#parent_container_1', lg: '#parent_container_2'} that the swapper component will swap the parent element from #parent_container_1 to #parent_container_2 when the screen grows from smaller sizes to lg size or bigger and vice versa.

Methods

All Swapper components are initialized automatically, however the following are Password Meter's functionality methods for more control.
Name Description
Static Methods
createInstances(DOMString selector) Initializes Swapper instances by selector. Default value of selector is [data-kt-swapper="true"]. This method can be used to initialize dynamicly populated Swapper instances(e.g: after Ajax request).
KTSwapper.createInstances();
getInstance(DOMElement element) Get the Swapper instance created
var swapperElement = document.querySelector("#kt_swapper_control");
var swapper = KTSwapper.getInstance(swapperElement);
Public Methods
update Forces the Swapper component to update and re-position depending on screen size.
swapper.update();
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now