Overview

Swapper is an exclusive component of Metronic 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>

Initialization

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
`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();`