Premium Bootstrap 4, Angular 8, React Admin Dashboard Themes

The World’s #1 Bootstrap 4 HTML, Angular 8, React & VueJS

Admin Dashboard Theme Framework

Javascripts

KLayout is the most important script that handles most of the base layouts. The layout scripts are located within each demo's scripts folder; [metronic]/theme/default/[demo]/src/assets/js/global/layout/layout.js

Function	Description
Private Functions
`initHeader()`	Initialize the header (`KTHeader`).
`initHeaderMenu()`	Initialize the offcanvas toggle (`KTOffcanvas`) and horizontal menu (`KTMenu`) in the header.
`initHeaderTopbar()`	Initialize topbar toggle (`KTToggle`) in the header for the mobile view display.
`initAside()`	Initialize the left aside menu for offcanvas toggle (`KTOffcanvas`).
`initAsideMenu()`	Initialize the left aside menu (`KTMenu`).
`initAsideToggler()`	Initialize the left aside toggle (`KTToggle`).
`initAsideSecondary()`	Initialize the secondary aside toggle (`KTToggle`).
`initScrolltop()`	Initialize the page scrolltop toggle button (`KTScrolltop`).
`initPageStickyPortlet()`	Initialize the page sticky portlet, if any sticky portlet on the page. (`KTPortlet`).
Public Functions
`init()`	Initialize the main function.
`initHeader()`	Initialize all the header functions. `initHeader(); initHeaderMenu(); initHeaderTopbar(); initScrolltop();`
`initAside()`	Initialize all the left aside functions. `initAside(); initAsideMenu(); initAsideToggler();`
`initAsideSecondary()`	Initialize the secondary aside toggle.
`initPageStickyPortlet()`	Initialize the page sticky portlet, if any sticky portlet on the page.
`getAsideMenu()`	Get the aside menu (`KTMenu`) instance.
`onAsideToggle()`	Event on toggle left aside menu.
`getAsideToggler()`	Get the aside menu toggle instance (`KTToggle`).
`openAsideSecondary()`	Open secondary aside panel programatically.
`closeAsideSecondary()`	Close secondary aside panel programatically.
`getAsideSecondaryToggler()`	Get secondary aside panel toggler instance (`KTToggle`).
`onAsideSecondaryToggle()`	Event on secondary aside panel toggle.
`closeMobileAsideMenuOffcanvas()`	Close mobile aside menu offcanvas programatically.
`closeMobileHeaderMenuOffcanvas()`	Close mobile header menu offcanvas programatically.

Metronic comes with a globally available KTApp JS class with general purpose helper functions. The script file is located at [metronic]/theme/default/[demo]/src/assets/js/global/components/base/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 8 & React Support

Enterprise ready Angular and React 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

75,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