.png)
4 days ago
2
A dialect for Thymeleaf that enables reusable UI components with named slots and parameters.
- Define reusable UI components
- Support for default and named slots
- Support for component parameters
- Simple integration with Thymeleaf into Spring
Add the following dependency to your Maven project:
</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.1.3.RELEASE</version>
</dependency>"><dependency>
<groupId>ch.cstettler.thymeleaf</groupId>
<artifactId>thymeleaf-component-dialect</artifactId>
<version><!-- place version number here --></version>
</dependency>
<!-- Thymeleaf is a provided dependency -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.1.3.RELEASE</version>
</dependency>
When using Spring, define the component dialect as a bean in your application configuration and list your components via the addComponent() method:
@Bean
public ComponentDialect componentDialect() {
return new ComponentDialect()
.addComponent("button", "components/button.html")
.addComponent("alert", "components/alert.html")
.addComponent("card", "components/card.html");
}
The component name is the tag name to use in your templates, and the template path is the location of the component template. Template paths are relative to the src/main/resources/templates directory.
When directly instantiating the template engine, set the component dialect using TemplateEngine.addDialect().
<th:block xmlns:th="http://www.thymeleaf.org" th:fragment="card(title)">
<div class="card">
<div class="card-header" th:text="${title}">Card Title</div>
<div class="card-body">
<pl:slot>
<div>Default content goes here</div>
</pl:slot>
<pl:slot pl:name="footer">
<div>Footer content goes here</div>
</pl:slot>
</div>
</div>
</th:block>'><!-- src/main/resources/templates/components/card.html -->
<th:block xmlns:th="http://www.thymeleaf.org" th:fragment="card(title)">
<div class="card">
<div class="card-header" th:text="${title}">Card Title</div>
<div class="card-body">
<pl:slot>
<!-- default slot -->
<div>Default content goes here</div>
</pl:slot>
<pl:slot pl:name="footer">
<!-- named slot -->
<div>Footer content goes here</div>
</pl:slot>
</div>
</div>
</th:block>
Do the same accordingly for the other components.
<pl:card pl:title="My Card">
<div>This will replace the default slot content</div>
<div pl:slot="footer">
<b>This will replace the footer slot content</b>
</div>
</pl:card>
Thymeleaf Component Dialect is Open Source software released under the Apache 2.0 license.
