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`

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.

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

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 .

// 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