Views

Metronic uses Thymleaf as a template engine and Thymeleaf Layout Dialect to decorate a layout. Thymleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

Base View

Metronic base view is starterkit/src/main/resources/templates/layout/master.html it contains all script and style imports. Each layout template should be wrapped with this view by specifiying a decorator layout:decorate="~{layout/master}"

By default base view has two layout fragments offcanvas and content. You can provide a content fragment to render you page view and a offcanvas fragment to provide your offcanvas elements (modals, drawers, e.t.c.).

Specifying a Layout

You can easyly specify layout for your view by setting a layout decorator. All available layout options are placed inside starterkit/src/main/resources/templates/layout.

<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/system}">
   ...
</html>

Content of you page should be wrapped with element with attribute layout:fragment="content" it will let a thymleaf layout dialect to render your page view code inside a specified layout.

<div layout:fragment="content">...</div>

Global Partials

All global partials are located inside folder starterkit/src/main/resources/templates/partials.

<div th:replace="partials/widgets/lists/_widget-26.html"></div>

Pages

All page view are located in folder starterkit/src/main/resources/templates/pages, then you can return these view from your controller.

All Controller classes should be marked with @Contoroller annotation.
@GetMapping("/")
    public String index(){
        return "pages/dashboards/index";
    }

Code above specifies that by accessing a / route you will get a page/dashboards/index.html view file

Preview Get Help Buy Now