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:
For example: 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.
{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).
|
getInstance(DOMElement element)
|
Get the Swapper instance created
|
| Public Methods | |
update
|
Forces the Swapper component to update and re-position depending on screen size.
|
2024©
Keenthemes
