### KTRangeSlider Initialization Example
Source: https://ktui.io/docs/range-slider
Example demonstrating how to initialize and use KTRangeSlider.
```javascript
KTRangeSlider.init();
const el = document.querySelector('[data-kt-range-slider]');
const slider = KTRangeSlider.getInstance(el);
console.log(slider?.getValue());
```
--------------------------------
### Example Usage
Source: https://ktui.io/docs/toast
Demonstrates how to use KTToast.show(), KTToast.hide(), and KTToast.clearAll().
```APIDOC
## Example Usage
```javascript
// Show a toast
const toast = KTToast.show({
message: 'Profile saved',
variant: 'success',
duration: 3000,
action: {
label: 'Undo',
onClick: (id) => {
console.log('Undo clicked', id);
}
}
});
// Hide a toast
KTToast.hide(toast.id);
// Clear all toasts
KTToast.clearAll();
```
```
--------------------------------
### Initialize and Use KTThemeSwitch in TypeScript
Source: https://ktui.io/docs/theme-switch
Import and utilize KTThemeSwitch, its types, and configuration options for typed development. This example shows getting an instance, retrieving the current mode, setting a new mode, and creating a new instance with options.
```typescript
import {
KTThemeSwitch,
type KTThemeSwitchConfigInterface,
type KTThemeSwitchInterface,
type KTThemeSwitchModeType,
} from '@keenthemes/ktui';
const theme: KTThemeSwitchInterface = KTThemeSwitch.getInstance();
theme.getMode();
theme.setMode('dark' as KTThemeSwitchModeType);
const options: KTThemeSwitchConfigInterface = { mode: 'system' };
const root = document.body;
const instance: KTThemeSwitchInterface = new KTThemeSwitch(root, options);
```
--------------------------------
### KTTabs Static Utilities Example
Source: https://ktui.io/docs/tabs
Example of using static utility methods for KTTabs initialization.
```javascript
// Initialize all tabss
KTTabs.init();
// Initialzie pending tabss
KTTabs.createInstances();
// Get tabs object
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);
```
--------------------------------
### Install KtUI via NPM
Source: https://ktui.io/docs/installation
Run this command in your terminal to install the KtUI package. Ensure you have Node.js and a working Tailwind CSS project.
```bash
npm i @keenthemes/ktui
```
--------------------------------
### Basic Input Example
Source: https://ktui.io/docs/input
Renders a standard clickable input field.
```html
```
--------------------------------
### File Input Example
Source: https://ktui.io/docs/input
An input element specifically for selecting files.
```html
```
--------------------------------
### KTTabs Event Handling Example
Source: https://ktui.io/docs/tabs
Example of how to handle 'show' and 'shown' events for the KTTabs component.
```javascript
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);
tabs.on('show', (detail) => {
detail.cancel = true;
console.log('show action canceled');
});
tabs.on('shown', () => {
console.log('shown event');
});
```
--------------------------------
### TypeScript Integration with KTRating
Source: https://ktui.io/docs/rating
Import `KTRating` and its types from `@keenthemes/ktui` for type-safe usage. This example shows how to get an instance, set its value, and retrieve it, as well as how to create a new instance with typed configuration.
```typescript
import {
KTRating,
type KTRatingConfigInterface,
type KTRatingInterface,
} from '@keenthemes/ktui';
const el = document.querySelector('[data-kt-rating]');
if (!el) return;
const rating: KTRatingInterface | null = KTRating.getInstance(el);
if (rating) {
rating.setValue(4);
console.log(rating.getValue());
}
// Or create with typed config
const options: KTRatingConfigInterface = { value: 3, max: 5 };
const instance: KTRatingInterface = new KTRating(el, options);
```
--------------------------------
### Toggling Multiple Drawers
Source: https://ktui.io/docs/drawer
This example demonstrates how to manage and toggle between multiple drawers for different actions. Each drawer can be linked to toggle others.
```html
Drawer Title
Drawer content
Drawer Title
Drawer content
```
--------------------------------
### Instantiate and Use KTImageInput Methods
Source: https://ktui.io/docs/image-input
Demonstrates how to get an instance of KTImageInput and use its methods like remove() and isChanged().
```javascript
const imageInputEl = document.querySelector('#my_image-input');
const imageInput = KTImageInput.getInstance(imageInputEl);
imageInput.remove();
const status = imageInput.isChanged();
```
--------------------------------
### Initialize and Use KTClipboard Instance
Source: https://ktui.io/docs/clipboard
Demonstrates how to import KTClipboard, get or create an instance, and configure it with options. Use this when you need programmatic control over the clipboard functionality.
```typescript
import {
KTClipboard,
type KTClipboardConfigInterface,
type KTClipboardInterface,
} from '@keenthemes/ktui';
const el = document.querySelector('[data-kt-clipboard]');
if (!el) throw new Error('Missing clipboard trigger');
// Get existing instance
const instance: KTClipboardInterface | null = KTClipboard.getInstance(el);
// Or create one with typed config
const options: KTClipboardConfigInterface = {
target: '#my_input',
text: 'Fallback (if configured via attributes)',
action: 'copy',
};
const clipboard = KTClipboard.getOrCreateInstance(el, options);
```
--------------------------------
### Initialize and Show Tab with KTTabs
Source: https://ktui.io/docs/tabs
Demonstrates how to get an existing KTTabs instance and programmatically show a specific tab using its button element.
```javascript
const tabsEl = document.querySelector('#my_tabs');
// Select the button element with data-kt-tab-toggle attribute
const tabButton = tabsEl.querySelector('button[data-kt-tab-toggle="#tab_1_2"]');
const tabs = KTTabs.getInstance(tabsEl);
tabs.show(tabButton);
```
--------------------------------
### Initialize and Toggle Password Visibility
Source: https://ktui.io/docs/toggle-password
Demonstrates how to get an instance of KTTogglePassword and programmatically toggle password visibility.
```javascript
const togglePasswordEl = document.querySelector('#my-toggle-password');
const togglePassword = KTTogglePassword.getInstance(togglePasswordEl);
togglePassword.toggle();
```
--------------------------------
### Basic Pagination Example
Source: https://ktui.io/docs/pagination
This snippet shows the basic structure for a pagination component, including 'Preview' and 'Next' buttons, page numbers, and an ellipsis for indicating more pages.
```html
```
--------------------------------
### Get KTDataTable Instance and Re-initialize
Source: https://ktui.io/docs/datatable
Shows how to retrieve an existing KTDataTable instance using getInstance(), dispose of it, and then create a new instance with updated configuration.
```javascript
// Get datatable object
const datatableEl = document.querySelector('#my_datatable');
const datatable = KTDataTable.getInstance(datatableEl);
// Re-initialize with updated configuration
const existingInstance = KTDataTable.getInstance(datatableEl);
if (existingInstance) {
existingInstance.dispose();
}
const updatedDatatable = new KTDataTable(datatableEl, {
apiEndpoint: '/api/new-endpoint',
pageSize: 20
});
```
--------------------------------
### Popover Implementation
Source: https://ktui.io/docs/tooltip
Transform a tooltip into a popover by replacing the 'kt-tooltip' class with 'kt-popover' and adding a header and content. This example uses 'click' as the trigger.
```html
Popover Title
Behold this captivating popover content. It’s quite engaging, wouldn’t you
say?
```
--------------------------------
### Programmatically Control Tooltip Instance
Source: https://ktui.io/docs/tooltip
Demonstrates how to get a tooltip instance and use its methods to show, hide, or toggle the tooltip's visibility.
```javascript
const tooltipEl = document.querySelector('#my-tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);
tooltip.show();
tooltip.hide();
tooltip.toggle();
```
--------------------------------
### Form Structure with Inputs and Actions
Source: https://ktui.io/docs/input
A complete form example including labels, input fields, descriptions, error messages, and action buttons (reset and submit).
```html
```
--------------------------------
### Input Group with Text and Icon Addons
Source: https://ktui.io/docs/input
Demonstrates how to use text and icon addons on both the start and end of an input field. Includes examples with a button.
```html
Addon
Addon
```
--------------------------------
### Import and Use KTRepeater in TypeScript
Source: https://ktui.io/docs/repeater
Import the KTRepeater component and its types from `@keenthemes/ktui`. This example demonstrates getting an instance and adding a clone, as well as creating a new instance with configuration.
```typescript
import {
KTRepeater,
type KTRepeaterConfigInterface,
type KTRepeaterInterface,
} from '@keenthemes/ktui';
const triggerEl = document.querySelector('#my_repeater_trigger');
if (!triggerEl) return;
const repeater: KTRepeaterInterface | null = KTRepeater.getInstance(triggerEl);
if (repeater) repeater.add();
const options: KTRepeaterConfigInterface = {
target: '#template',
wrapper: '#container',
limit: 5,
};
const instance: KTRepeaterInterface = KTRepeater.getOrCreateInstance(triggerEl, options);
```
--------------------------------
### TypeScript Integration for KTScrollto
Source: https://ktui.io/docs/scrollto
Illustrates how to import KTScrollto component and its types from `@keenthemes/ktui` for type-safe usage. This example shows how to get an instance, trigger a scroll, and create a new instance with typed options.
```typescript
import {
KTScrollto,
type KTScrolltoConfigInterface,
type KTScrolltoInterface,
} from '@keenthemes/ktui';
const scrolltoEl = document.querySelector('#my_scrollto');
if (!scrolltoEl) return;
const scrollto: KTScrolltoInterface | null = KTScrollto.getInstance(scrolltoEl);
if (scrollto) scrollto.scroll();
const options: KTScrolltoConfigInterface = {};
const instance: KTScrolltoInterface = new KTScrollto(scrolltoEl, options);
```
--------------------------------
### Initialize KTTooltip Instances
Source: https://ktui.io/docs/tooltip
Use KTTooltip.init() to initialize all tooltips on page load. Use KTTooltip.createInstances() for dynamically added elements.
```javascript
KTTooltip.init();
```
```javascript
KTTooltip.createInstances();
```
```javascript
const tooltipEl = document.querySelector('#my-tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);
```
--------------------------------
### Basic Reparent Example
Source: https://ktui.io/docs/reparent
Demonstrates responsive parent switching using data attributes. Resize the browser to observe the child content moving between Parent 1 and Parent 2 based on screen size breakpoints.
```html
Parent 1
default
Parent 2
sm
Child content.
```
--------------------------------
### TypeScript Integration for KTScrollspy
Source: https://ktui.io/docs/scrollspy
Import KTScrollspy and its associated types for typed options and instance management in TypeScript projects. This example shows how to get an instance, attach an event listener, and create a new instance with options.
```typescript
import {
KTScrollspy,
type KTScrollspyConfigInterface,
type KTScrollspyInterface,
} from '@keenthemes/ktui';
const scrollspyEl = document.querySelector('#my_scrollspy');
if (!scrollspyEl) return;
const scrollspy: KTScrollspyInterface | null = KTScrollspy.getInstance(scrollspyEl);
if (scrollspy) scrollspy.on('activate', () => {});
const options: KTScrollspyConfigInterface = {};
const instance: KTScrollspyInterface = new KTScrollspy(scrollspyEl, options);
```
--------------------------------
### Copy Command with Tooltip Feedback
Source: https://ktui.io/docs/clipboard
This example demonstrates copying a command-line instruction and provides tooltip feedback to the user. The `data-kt-tooltip` and `data-kt-tooltip-placement` attributes are used for the tooltip, and the script updates the tooltip text on success or error.
```html
npm install @keenthemes/ktui
```
--------------------------------
### Initialize and Use KTDataTable Instance
Source: https://ktui.io/docs/datatable
Demonstrates how to create a new KTDataTable instance with specific options and then use methods like reload and showSpinner.
```javascript
const datatableEl = document.querySelector('#my_datatable');
const options = {
pageSize: 5,
stateSave: true,
};
const datatable = new KTDataTable(datatableEl, options);
datatable.reload();
datatable.showSpinner();
```
--------------------------------
### Initialize and Manage KTDropdown Instances
Source: https://ktui.io/docs/dropdown
Shows how to initialize all KTDropdown components on the page using init() or createInstances() for dynamically added elements. Also demonstrates retrieving an existing instance with getInstance().
```javascript
// Initialize all dropdowns
KTDropdown.init()
// Initialzie pending dropdowns
KTDropdown.createInstances();
// Get dropdown object
const dropdownEl = document.querySelector('#my-dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);
```
--------------------------------
### KTTabs Initialization and Usage
Source: https://ktui.io/docs/tabs
Demonstrates how to initialize and use the KTTabs component, including programmatic control and event handling.
```APIDOC
## KTTabs Component API
### Description
The KTTabs component allows for the creation and management of tabbed interfaces. It supports auto-initialization and programmatic control via JavaScript.
### Methods
#### Instance Methods
- **`new KTTabs(element, options)`**: Creates a new KTTabs instance.
- `element` (HTMLElement): The DOM element to initialize the tabs on.
- `options` (object): Configuration options for the tabs.
- **`show(tabElement)`**: Activates a tab button and displays its associated content.
- `tabElement` (HTMLElement): The tab button element to activate.
- **`isShown(tabElement)`**: Checks if the content associated with a tab button is visible.
- `tabElement` (HTMLElement): The tab button element to check.
- **`getOption(name)`**: Retrieves the value of a configuration option.
- `name` (string): The name of the option to retrieve.
- **`getElement()`**: Retrieves the DOM element associated with the instance.
- **`on(eventName, handler)`**: Attaches an event listener.
- `eventName` (string): The name of the event to listen for.
- `handler` (function): The callback function to execute.
- Returns: `string` - The unique ID of the registered listener.
- **`off(eventName, eventId)`**: Removes an event listener.
- `eventName` (string): The name of the event.
- `eventId` (string): The ID of the listener to remove.
- **`dispose()`**: Removes the KTTabs instance and cleans up associated data.
#### Static Utility Methods
- **`KTTabs.init()`**: Initializes all KTTabs instances on the page.
- **`KTTabs.createInstances()`**: Creates instances for dynamically added elements.
- **`KTTabs.getInstance(element)`**: Gets the KTTabs instance associated with a DOM element.
- `element` (HTMLElement): The DOM element.
- Returns: `KTTabs` - The KTTabs instance or null.
- **`KTTabs.getOrCreateInstance(element)`**: Gets or creates a KTTabs instance for a DOM element.
- `element` (HTMLElement): The DOM element.
- Returns: `KTTabs` - The KTTabs instance.
### Events
- **`show`**: Triggered before a tab is shown. Can be cancelled by setting `detail.cancel = true`.
- **`shown`**: Triggered after a tab is fully displayed.
### Options
- **`data-kt-tabs`** (`boolean`, default: `true`): Enables auto-initialization.
- **`data-kt-tabs-hidden-class`** (`string`, default: `
```
--------------------------------
### Get KTSticky Instance and Update
Source: https://ktui.io/docs/sticky
Retrieves an existing KTSticky instance for a given element and updates it. Ensure the element exists before attempting to get the instance.
```javascript
const stickyEl = document.querySelector('#my_sticky');
const sticky = KTSticky.getInstance(stickyEl);
sticky.update();
const isActive = sticky.isActive();
```
--------------------------------
### Get Scrollable Instance and Update Height
Source: https://ktui.io/docs/scrollable
Retrieves an existing KTScrollable instance from a DOM element and updates its calculated height. Ensure the element exists before attempting to get its instance.
```javascript
const scrollableEl = document.querySelector('#my_scrollable');
const scrollable = KTScrollable.getInstance(scrollableEl);
const height = scrollable.getHeight();
scrollable.update();
```
--------------------------------
### Scroll To Target Example
Source: https://ktui.io/docs/scrollto
Smoothly scroll to top or bottom of the page.
```APIDOC
## Scroll To Target
Smoothly scroll to top of the page.
```html
```
```
--------------------------------
### Initialize KTImageInput Instances
Source: https://ktui.io/docs/image-input
Shows how to initialize all image inputs on the page or pending ones that were dynamically added.
```javascript
// Initialize all image inputs
KTImageInput.init();
// Initialzie pending image inputs
KTImageInput.createInstances();
// Get image input object
const imageInputEl = document.querySelector('#my_image_input');
const imageInput = KTImageInput.getInstance(imageInputEl);
```
--------------------------------
### Event Listener Example
Source: https://ktui.io/docs/toast
Attaching an event listener to a toast element.
```APIDOC
## Event Listener Example
```javascript
const toast = KTToast.show({ message: 'Event example' });
toa.element.addEventListener('kt.toast.shown', (e) => {
console.log('Toast shown', e.detail);
});
```
```
--------------------------------
### Readonly Input Example
Source: https://ktui.io/docs/input
Displays an input field that is read-only and cannot be modified.
```html
```
--------------------------------
### Disabled Input Example
Source: https://ktui.io/docs/input
Shows an input field that is disabled and cannot be interacted with.
```html
```
--------------------------------
### Basic Image Input with Preview
Source: https://ktui.io/docs/image-input
This snippet demonstrates the basic structure of the Image Input component, including file input, hidden input for removal, a remove button, and placeholder/preview divs. It's initialized with `data-kt-image-input="true"`.
```html
```
--------------------------------
### Initialize KTThemeSwitch Instances
Source: https://ktui.io/docs/theme-switch
Automatically initialize all KTThemeSwitch instances on page load using `KTTheme.init()`. Use `KTTheme.createInstances()` for dynamically added elements. Retrieve an existing instance with `KTTheme.getInstance()` or create a new one if it doesn't exist using `KTTheme.getOrCreateInstance()`.
```javascript
// Initialize all instances
KTTheme.init();
// Initialzie pending instances
KTTheme.createInstances();
// Get theme object
const themeEl = document.querySelector('body');
const theme = KTTheme.getInstance(themeEl);
```
--------------------------------
### Basic Usage Example
Source: https://ktui.io/docs/scrollto
Smoothly scroll to a specific element within a scrollable container.
```APIDOC
## Basic Usage
Smoothly scroll to a specific element within a scrollable container.
```html
```
```
--------------------------------
### Initialize All Tabs with KTTabs.init()
Source: https://ktui.io/docs/tabs
Shows how to automatically initialize all KTTabs instances on the page that have the `data-kt-tabs="true"` attribute.
```javascript
// Initialize all tabss
KTTabs.init();
```
--------------------------------
### KTRangeSlider TypeScript Usage
Source: https://ktui.io/docs/range-slider
Comprehensive TypeScript example showing instance creation and event payload handling.
```typescript
import {
KTRangeSlider,
type KTRangeSliderConfigInterface,
type KTRangeSliderInterface,
type KTRangeSliderEventPayloadInterface,
} from '@keenthemes/ktui';
const root = document.querySelector('[data-kt-range-slider]');
if (!root) {
throw new Error('missing root');
}
const slider: KTRangeSliderInterface | null = KTRangeSlider.getOrCreateInstance(root, {
output: '#kt-range-slider-value',
} satisfies KTRangeSliderConfigInterface);
if (slider) {
const input = slider.getRangeInput();
const detail: KTRangeSliderEventPayloadInterface = {
value: slider.getValue(),
min: input ? parseFloat(input.min || '0') : 0,
max: input ? parseFloat(input.max || '100') : 100,
};
// Event payloads from `kt.range-slider.*` also include `step` when the input has a numeric step.
console.log(detail);
}
```
--------------------------------
### Get KTTabs Instance with KTTabs.getInstance()
Source: https://ktui.io/docs/tabs
Demonstrates how to retrieve an existing KTTabs instance associated with a specific DOM element.
```javascript
// Get tabs object
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);
```
--------------------------------
### Initialize KTDrawer with TypeScript
Source: https://ktui.io/docs/drawer
Import KTDrawer and its types from '@keenthemes/ktui' for typed options and instance management. Use KTDrawer.getInstance to get an existing instance or new KTDrawer to create one.
```typescript
import {
KTDrawer,
type KTDrawerConfigInterface,
type KTDrawerInterface,
} from '@keenthemes/ktui';
const drawerEl = document.querySelector('#my-drawer');
if (!drawerEl) return;
const drawer: KTDrawerInterface | null = KTDrawer.getInstance(drawerEl);
if (drawer) drawer.show();
const options: KTDrawerConfigInterface = {};
const instance: KTDrawerInterface = new KTDrawer(drawerEl, options);
```
--------------------------------
### Initialize and Control KTDrawer Instance
Source: https://ktui.io/docs/drawer
Demonstrates how to get an existing KTDrawer instance and programmatically show, hide, or toggle it. Ensure the drawer element exists in the DOM and has been initialized.
```javascript
const drawerEl = document.querySelector('#my-drawer');
const drawer = KTDrawer.getInstance(drawerEl);
drawer.show();
drawer.hide();
drawer.toggle();
```
--------------------------------
### Dropdown with Tooltip Integration
Source: https://ktui.io/docs/dropdown
This example demonstrates nesting a tooltip within a dropdown. Ensure both components are initialized for full functionality.
```html
The Tailwind Dropdown
Here is a delightful tooltip!
component offers a sleek, user-friendly interface for presenting
overlay content.