Tailwind Reparent component enables responsive parent switching, allowing you to move elements to different containers at specific screen sizes.
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" .
These data attributes allow you to set options for the reparent component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-reparent-mode | Specifies the placement mode to determine whether the content is appended or prepended within the parent container per breakpoint. | ||
data-kt-reparent-target | Define parent elements per breakpoint. |
This table details the custom classes and data attributes used by the accordion component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-reparent="true" | Used to auto-initialize KTReparent instances on page load. |
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 |
updates() | Updates the elements parent. |
getOption(name) | Retrieves the value of a configuration option by |
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 |
off(eventName, eventId) | Removes an event listener for the |
dispose() | Removes the KTReparent instance from an element, including any associated data stored on the DOM element. |
const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);
reparent.update();Manage and interact with KTReparent instances using these static methods of KTReparent JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTReparent object for all elements with the |
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 |
getOrCreateInstance(element) | Returns the existing |
// Initialize all scrollables
KTReparent.init();
// Initialzie pending scrollables
KTReparent.createInstances();
// Get scrollable object
const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);