This guide will demonstrate how KtUI JavaScript can be utilized in various use cases.
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>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>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();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();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();