Search⌘ K
AI Features
Home
Courses
Building Scalable Applications with Thymeleaf and Spring Boot

Fragments with HTML Snippets as Parameters

Explore how to build parameterized Thymeleaf fragments that include HTML snippet parameters like SVG icons. Understand how to pass and use these parameters effectively to create reusable menu components, ensuring icons and text display correctly within the fragment structure.

We'll cover the following...

In our application, each menu item has an SVG icon. As a reminder, here is how a menu item in our application currently looks like:

HTML
<a href="#"
class="group flex items-center px-2 py-2 text-sm leading-5 font-medium 
text-gray-900 rounded-md bg-gray-100 hover:text-gray-900 hover:bg-gray-100 
focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150">
    <svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:textgray-
    600 transition ease-in-out duration-150"
    fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0
    01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
    </svg>
        Dashboard
</a>

Parameterized fragment

If we want to create a parameterized fragment out of this, we need a way to pass the <svg> element ...