Reparent

Docs

Reparent

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

Examples

Basic Upage

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" .

<div class="space-y-5">
  <div
    class="flex flex-col items-center gap-3 border border-green-500 p-6 rounded-lg"
  >
    <div
      class="flex items-center gap-1 text-gray-900 dark:text-white font-semibold text-base"
    >
      Parent 1<!-- -->
      <code
        class="px-2 py-1 text-xs leading-none font-medium text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-600 border border-transparent rounded-md inline-flex items-center"
        >default</code
      >
    </div>
    <div id="parentOne"></div>
  </div>
  <div
    class="flex flex-col items-center gap-3 border border-yellow-500 p-6 rounded-lg"
  >
    <div
      class="flex items-center gap-1 text-gray-900 dark:text-gray-100 font-semibold text-base"
    >
      Parent 2<!-- -->
      <code
        class="px-2 py-1 text-xs leading-none font-medium text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-600 border border-transparent rounded-md inline-flex items-center"
        >sm</code
      >
    </div>
    <div id="parentTwo">
      <div
        data-kt-reparent="true"
        class="border-2 border-dashed border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-medium rounded-lg p-6 [--kt-reparent-mode:prepend] sm:[--kt-reparent-mode:prepend] [--kt-reparent-target:#parentOne] sm:[--kt-reparent-target:#parentTwo]"
      >
        Child content.
      </div>
    </div>
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the reparent component during auto initialization.

Option	Type	Default	Description
`data-kt-reparent-mode`	~~enum~~	-	Specifies the placement mode to determine whether the content is appended or prepended within the parent container per breakpoint.
`data-kt-reparent-target`	~~string~~	-	Define parent elements per breakpoint.

Selectors

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.

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 elements 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.

const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);
 
reparent.update();

To initialize Tailwind Accordion with JavaScript, use data-accordion="false" attribute instead. This prevents automatic initialization on page load.

Utilities

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 ~~data-kt-reparent~~ 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.

// Initialize all scrollables
KTReparent.init()
 
// Initialzie pending scrollables
KTReparent.createInstances();
 
// Get scrollable object
const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);

Events

PreviouseRadio Group NextScrollable

On This Page

Examples
- Basic Upage
Component API