Logo

Documentation v8.2.5

  • Home
  • Swapper Exclusive
Downloads Preview
Light
Dark
System

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>

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 trueor falsevalues.
data-kt-swapper-mode optional Defines the re-positioning method. Accepts appendor 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 pxvalues. 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_1to #parent_container_2when the screen grows from smaller sizes to lgsize 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 selectoris [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();