Preview Purchase
Base Components

Tailwind CSS Reparent

Tailwind CSS Reparent component enables responsive parent switching, allowing you to move elements to different containers at specific screen sizes.

Default Reparent

Resize your browser to see the example content switch parents based on the configuration data-reparent-target="#parent_1|lg:#parent_2|xl:parent_3" .
Preview HTML
Parent 1 default
Example content goes here.
Parent 2 lg
Parent 3 xl

Source Code

The following source file manages the JavaScript behavior of the Tailwind CSS Reparent component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/js/core.bundle.js bundle, making it available globally across all pages.
File Description
src/core/components/reparent/reparent.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Reparent component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Reparent component. 
				
					<div data-reparent="true" data-reparent-mode="prepend|lg:prepend|xl:prepend" data-reparent-target="#parent_1|lg:#parent_2|xl:parent_3">
 Example content goes here.
</div>

Data Attribute Initialization

Auto-initialize all KTReparent instances on page load by adding the data-reparent="true" attribute to your reparent elements. This triggers on the fly initialization by the KTReparent JavaScript component. 
				
					<div data-reparent="true" data-reparent-mode="prepend|lg:prepend|xl:prepend" data-reparent-target="#parent_1|lg:#parent_2|xl:parent_3" id="my_reparent">
 Example content goes here.
</div>
These attributes allow you to set options for the KTReparent component during initialization. The values you provide as strings are automatically converted to the appropriate KTReparent Options .
HTML Attribute Type Default Description
data-reparent boolean true Used to auto-initialize KTReparent instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
data-reparent-mode
enum
"append" | "prepend"
- Specifies the placement mode to determine whether the content is appended or prepended within the parent container per breakpoint.
data-reparent-target string - Define parent elements per breakpoint.

JavaScript Initialization

To initialize a new scrollable component, pass the corresponding DOM element and configuration options to the KTReparent class constructor.
JavaScript HTML 
				
					// Reparent toggle element
const reparentEl = document.querySelector('#my_reparent');

// Configuration options(optional)
const options = {
	mode: 'prepend|lg:prepend',
	target: '#parent_1|lg:#parent_2'
};

// Initialize object
const reparent = new KTReparent(reparentEl, options);

To initialize the scrollable with JavaScript, use data-reparent="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Reparent instances, using the KTReparent JavaScript component.
Option Type Default Description
mode
enum
"append" | "prepend"
- Specifies the placement mode to determine whether the content is appended or prepended within the parent container per breakpoint.
target string - Define parent elements per breakpoint.

Utilities

Manage and interact with KTReparent instances using these static methods of KTReparent class.
Method Description
init() Automatically initializes KTReparent object for all elements with the data-scrollable="true" attribute on page load.
createInstances() Allows to create KTReparent instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element) Returns the KTReparent object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTReparent object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all scrollables
KTReparent.init()

// Initialzie pending scrollables
KTReparent.createInstances();

// Get scrollable object
const scrollableEl = document.querySelector('#my_scrollable');
const scrollable = KTReparent.getInstance(scrollableEl);

Methods

Use KTReparent component's API methods to programmatically control its behavior.
Method Description
new KTReparent(element, options) Creates an object instance of KTReparent class for the given DOM element and configuration options .
updates() Updates the element's parent.
getOption(name) Retrieves the value of a configuration option by name parameter from a KTReparent instance.
getElement() Retrieves the DOM element linked to a specific KTReparent instance.
on(eventName, handler) Allows attaching event listeners to the KTReparent custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTReparent. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId) Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose() Removes the KTReparent instance from an element, including any associated data stored on the DOM element.
JavaScript HTML 
				
					const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);

reparent.update();
Previous Rating Next Scrollable