In this article, we will show how to use Fragments in Thymeleaf templates. Fragment representing a piece of a template that can be included in other templates. It could be a header, menu, footer and any other part of a document usually repeated on many pages. Fragments can be parametrized and included with specific initial parameters.
If you need more information about how to install and use Thymeleaf in Spring Boot application follow that link: Spring Boot with Thymeleaf.
2. Including template fragments
To define new Thymeleaf Fragment we are using th:fragment attribute. Fragments could be isolated in a separate file (and we recommend this approach) or defined in any other template.
The simplest Fragment could have the following structure:
We can also define more than one Fragment in a single HTML document that could be also a well-formed HTML file:
There are three ways to include content from fragments:
using th:insert attribute - inserts the specified fragment inside the host tag,
using th:replace attribute - replaces a whole host tag with the specified fragment,
using th:include attribute - similar to th:insert but it inserts only the content of specified fragment (deprecated).
In the following example, we include footer fragment from parts using three approaches:
The result page will have the following structure:
3. Selectors for Fragments
Thymeleaf fragments can be included into another template using simple DOM selectors. We can grab HTML elements using their id or a class name. In the following example we include four fragments, one div.panel using class name of the DIV element:
The result will have the following structure:
3. Parametrized Fragments
Fragments defined with th:fragment can specify a set of input parameters. To use parametrized fragments we need to provide a fragment name with declared list of parameters.
In the following example, we define a fragment responsible for presenting a single contact row in an HTML table.
We use th:replace attribute to include a parametrized fragment contactRow(stat, row) with our contact list:
Parametrized fragments give us a lot of possibilities. It allows us to reuse one piece of template in many different ways. We can also separate commonly used logic into one fragment and attach it in many templates.
4. Flexible layouts
Fragment expressions can be used not only for parameters like objects, numbers, lists, etc., we can also provide fragments of markup.
Let's say we want to have a defined set of stylesheets and javascript in a header section but also have a possibility to extend that list with other resources.
The base header fragment will have the following structure:
And now if we want to put some additional links into our header simply use baseHeader like in the following example:
::title and ::link is pointing to a title and link elements in the current template. The result head tag will look like the following:
5. Conclusion
In this article, we have shown how flexible a template layout mechanism in Thymeleaf is. We presented how to reuse fragments and how to work with parameterized templates. All the features make fragments an advanced tool for template management.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}