KTUI
Docs
JavaScript

JavaScript

This guide will demonstrate how KtUI JavaScript can be utilized in various use cases.

Require JavaScript Bundle

The HTML markup provided below includes the KtUI JavaScript bundle, which automatically initializes all KtUI components that require JavaScript behavior when the document is ready.

<!DOCTYPE html>
<html>
	<body>
		<h1>Hello world!</h1>
		<script src="./node-modules/@keenthemes/ktui/dist/ktui.min.js"></script>
 	</body>
</html>

Data Initialization

The fastest way to initialize KtUI components is by using HTML data attributes, such as data-kt-tooltip="true". This method allows for automatic instance initialization when the document is ready.

<button data-kt-tooltip="true" id="my_tooltip">
	Toggle Tooltop
	<div class="kt-tooltip" data-kt-tooltip-content="true">
		Hey, a delightful tooltip is here!
	</div>
</button>

JavaScript Initialization

You can manually initialize core components with JavaScript as shown below. To do this, remove data-tooltip="true" to prevent the instance from automatically initializing when the page loads.

// Tooltip toggle element
const tooltipEl = document.querySelector('#my_tooltip');
 
// Configuration options
const options = {
	placement:'bottom-start'
};
 
// Initialize object
const tooltip = new KTTooltip(tooltipEl, options);
 
// Use API methods
tooltip.show();
tooltip.hide();
tooltip.toggle();

Initialization API

KtUI components can be globally initialized anytime on demand using KTComponents.init() JavaScript API, You can also use this API method to initialize components that dynamically added to the page after the initial document load.

// Globally initialize KtUI components.
KTComponents.init();

TypeScript Support

KtUI's core components are entirely written in TypeScript, offering robust typing and enhanced maintainability. You can interact with KtUI components using the TypeScript types and interfaces defined in ./node-modules/@keenthemes/ktui/lib/esm as demonstrated below.

import {
	KTTooltip,
	KTTooltipInterface,
	KTTooltipConfigInterface } from './node_modules/@keenthemes/ktui/lib/esm';
 
// Tooltip toggle element
const tooltipEl: HTMLElement = document.querySelector('#my_tooltip');
 
// Configuration options
const options: KTTooltipConfigInterface = {
	placement:'bottom-start'
};
 
// Initialize object
const tooltip: KTTooltipInterface = new KTTooltip(tooltipEl, options);
 
// Use API methods
tooltip.show();
tooltip.hide();
tooltip.toggle();
PreviouseThemingNextDark mode