Spring Boot Structure
Spring Boot Folder Structure
Spring Boot File Structure
Overview
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
<th:block layout:fragment="pagetitle">
<!--page title-->
<div th:replace="partials/title-meta :: title-meta('Dashboard')"></div>
</th:block>
<head>
<!-- jsvectormap css -->
<link href="/assets/libs/jsvectormap/css/jsvectormap.min.css" rel="stylesheet" type="text/css" />
<!--Swiper slider css2-->
<link href="/assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- main content -->
<div layout:fragment="content">
<div th:replace="partials/page-title :: page-title('Starter Page','Starter Page')"></div>
</div>
<th:block layout:fragment="modal">
</th:block>
<th:block layout:fragment="pagejs">
</th:block>
</body>
</html>
Layout setup
You can set the default layout in the
src/main/resources/templates/layout.html
file in the html tag.
<html data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg">
data-layout="vertical" | To set default layout as Vertical |
---|---|
data-layout="horizontal" | To set default layout as Horizontal |
data-layout="twocolumn" | To set default layout as Two column |
data-layout="semibox" | To set default layout as Semibox |
data-layout-mode="light" | To set Light layout mode. |
data-layout-mode="dark" | To set Dark layout mode. |
data-sidebar-size="lg" data-layout-width="fluid" | To set layout width Fluid and left sidebar large. |
data-sidebar-size="sm-hover" data-layout-width="boxed" | To set layout width Boxed and left sidebar on hover show menu. |
data-layout-position="fixed" | To set layout position Fixed. |
data-layout-position="scrollable" | To set layout position Scrollable. |
data-topbar="light" | To set the Light color of Topbar. |
data-topbar="dark" | To set the dark color of Topbar. |
data-sidebar-size="lg" | To set the Large left sidebar. |
data-sidebar-size="md" | To set the Compact left sidebar. |
data-sidebar-size="sm" | To set the Icon view left sidebar. |
data-sidebar-size="sm-hover" | To set the Icon hover left sidebar. |
data-layout-style="default" | To set the Default layout. |
data-layout-style="detached" | To set the Detached layout. |
data-sidebar="light" | To set the Light color of left Sidebar. |
data-sidebar="dark" | To set the Dark color of left Sidebar. |
data-sidebar="gradient" | To set the Gradient color of left Sidebar. |
data-sidebar="gradient-2" | To set the Gradient-2 color of left Sidebar. |
data-sidebar="gradient-3" | To set the Gradient-3 color of left Sidebar. |
data-sidebar="gradient-4" | To set the Gradient-4 color of left Sidebar. |
data-sidebar-image="none" | To Disable image on left Sidebar. |
data-sidebar-image="img-1" | To set the img-1 Image of left Sidebar. |
data-sidebar-image="img-2" | To set the img-2 Image of left Sidebar. |
data-sidebar-image="img-3" | To set the img-3 Image of left Sidebar. |
data-sidebar-image="img-4" | To set the img-4 Image of left Sidebar. |
data-preloader="enable" | To enable the preloader on the Page. |
data-preloader="disable" | To disable the preloader on the Page. |
Galaxy Layout setup
You can set the galaxy layout in the
src/main/resources/templates/layout.html
file in the html tag.
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-layout-mode="dark" data-body-image="img-1" data-preloader="disable">
data-body-image="img-1" | To set img-1 on whole page(body). |
---|---|
data-body-image="img-2" | To set img-2 on whole page(body). |
data-body-image="img-3" | To set img-3 on whole page(body). |
data-body-image="none" | To remove image on whole page(body). |
Notes:
Above attributes works only
in Galaxy version layout.