Fragment Templates Demo

1. th:replace vs th:insert


<!-- th:replace: the <div> itself is REPLACED by the fragment -->
<div th:replace="~{fragments/layout :: footer}"></div>
<!-- Result: <footer class="footer">...</footer> (no wrapping div) -->

<!-- th:insert: the fragment is INSERTED INSIDE the <div> -->
<div th:insert="~{fragments/layout :: footer}"></div>
<!-- Result: <div><footer class="footer">...</footer></div> -->

2. Parameterised Fragment

The pageHeader fragment accepts title and subtitle parameters:


<!-- Fragment definition (in fragments/layout.html): -->
<div th:fragment="pageHeader(title, subtitle)" class="page-header">
    <h1 th:text="${title}">Page Title</h1>
    <p th:if="${subtitle}" th:text="${subtitle}">Subtitle</p>
</div>

<!-- Usage in any template: -->
<div th:replace="~{fragments/layout :: pageHeader('My Page', 'My subtitle')}"></div>

3. Student Card Fragment (from fragments/cards.html)

Each card below is rendered via a reusable studentCard(student) fragment:


<!-- Iterating and calling a parameterised fragment -->
<div th:each="s : ${students}">
    <div th:replace="~{fragments/cards :: studentCard(${s})}"></div>
</div>

4. Info Card Fragment

5. Alert Fragment


<!-- Fragment definition: -->
<div th:fragment="alert(type, message)"
     th:classappend="'alert-' + ${type}"
     class="alert"
     th:text="${message}">Alert</div>

<!-- Usage: -->
<div th:replace="~{fragments/layout :: alert('success', 'Saved!')}"></div>