Documentation v1.1.5

Preview

Overview

Swapper is an exclusive component of Craft 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-bolder">Parent Element 1</div>

            <!--begin::Swapper-->
            <div class="mt-3"
                data-kt-swapper="true"
                data-kt-swapper-mode="{default: 'append', lg: 'prepend'}"
                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-bolder">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-bolder">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-bolder">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();
Preview Get Help Buy Now