x
Support Purchase
Metronic

The Ultimate Bootstrap & Angular 7 Admin Theme Framework For Next Generation Applications

Watch Video

 

Global Javascripts

Metronic comes with a globally available KTApp JS class with general purpose helper functions. The script file is located at [root]/theme/default/src/assets/js/theme/core/app.js

Function Description
Private Functions
initTooltip(el) Initialize single tooltip.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initTooltips() Initialize all tooltips found in the page. The HTML elements must have an atrribute data-toggle="kt-tooltip"
initPopover(el) Initialize single popover.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initPopovers() Initialize all popovers found in the page. The HTML elements must have an atrribute data-toggle="kt-popover"
initFileInput() Initialize event on change to the HTML input with class .custom-file-input
initPortlet(el, options) Initialize single portlet instance.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Portlet options
initPortlets() Initialize all portlets found in the page. The HTML elements must have an atrribute data-ktportlet="true"
initScroll() Initialize all scrolls found in the page. The HTML elements must have an atrribute data-scroll="true"
initAlerts() Initialize close alerts found in the page. The HTML elements must have an atrribute data-close=alert"
initSticky() Initialize all sticky element found in the page. The HTML elements must have an atrribute data-sticky="true"
initAbsoluteDropdown(dropdown) Initialize Bootstrap dropdown.
Input Parameters
Name Type Description
dropdown HTMLElement Dropdown HTML element from jQuery object or KTUtil.get() functions.
Public Functions
init() Initialize initComponents() function below.
initComponents() Initialize all required components. 
initScroll();
initTooltips();
initPopovers();
initAlerts();
initPortlets();
initFileInput();
initSticky();
initTooltips() Initialize all tooltips found in the page. The HTML elements must have an atrribute data-toggle="kt-tooltip"
initTooltip(el) Initialize single tooltip.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initPopovers() Initialize all popovers found in the page. The HTML elements must have an atrribute data-toggle="kt-popover"
initPopover(el) Initialize single popover.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initPortlet(el, options) Initialize single portlet instance.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Portlet options
initPortlets() Initialize all portlets found in the page. The HTML elements must have an atrribute data-ktportlet="true"
initSticky() Initialize all sticky element found in the page. The HTML elements must have an atrribute data-sticky="true"
initAbsoluteDropdown(dropdown) Initialize Bootstrap dropdown.
Input Parameters
Name Type Description
dropdown HTMLElement Dropdown HTML element from jQuery object or KTUtil.get() functions.
block(target, options) Call the loading spinner programatically to block the target element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Block options
unblock(target) Remove the loading spinner and unblock the target element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
blockPage(options) Call loading spinner programatically to block the whole page. The laoding spinner is attach to the body tag.
Input Parameters
Name Type Description
options object Block options
unblockPage() Call to remove the loading spinner and unblock the page.
progress(target, options) Call the spinner to the element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Progress options
unprogress(target) Remove the spinner from the element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
getStateColor(name) Get state color by name from the colors list.
Input Parameters
Name Type Description
name string State color name.
getBaseColor(type, level) Get base color.
Input Parameters
Name Type Description
type string Base color type.
level number Type color level.
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes! Jonathan Bartlett, Metronic Customer

Powerful Framework

Everything within Metronic is customizable globally to provide limitless unique styled projects

Multi Demo

Choose a perfect design for your next project among hundreds of demos

Limitless Components

A huge collection of components to power your application with the latest UI/UX trands

Angular 7 Support

Enterprise ready Angular 7 integration with built-in authentication module and many more

Bootstrap 4

Metronic deeply customizes Bootstrap with native look and feel

Exclusive Datatable Plugin

Our super sleek and intuitive Datatable comes packed with all advanced CRUD features

70,000+ Strong

Metronic is the only theme trusted by over 70,000 developers world wide

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is written with a code structure that all developers will be able to pick up easily and fall in love

The Ultimate Bootstrap Admin Theme Trusted By Over 70,000 Developers World Wide

PURCHASE NOW