Simplificando o Front-End com Thymeleaf: Entendendo as Diretivas

O que são diretivas no Thymeleaf

Imagine que você está fazendo um sanduíche. As diretivas no Thymeleaf são como as instruções para montar seu sanduíche. Elas dizem ao navegador como mostrar o conteúdo da página. Simples assim!

O que são diretivas estruturais

Diretivas estruturais são como moldar a massa de um biscoito. Elas mudam a estrutura do seu código HTML. Basicamente, elas controlam o que aparece ou não na tela.

Exemplos com códigos de diretivas estruturais

Aqui está um exemplo de diretiva estrutural, o th:if:

html
<p th:if="${user.isLoggedIn}">Bem-vindo de volta!</p>

E também o th:each, que é como um loop:

html
<ul>
<li th:each="item : ${items}">Item: <span th:text="${item.name}"></span></li>
</ul>

Outro exemplo é o th:switch e th:case, que funciona como um "escolha":

html
<div th:switch="${day}">
<p th:case="'MON'">Segunda-feira</p>
<p th:case="'TUE'">Terça-feira</p>
<p th:case="*">Outro dia</p>
</div>

O que são diretivas de atributos

As diretivas de atributos são como adicionar recheio ao seu sanduíche. Elas mudam partes específicas do seu HTML, como o texto ou atributos dos elementos.

Exemplos com códigos de diretivas com atributos

Veja um exemplo usando th:text:

html
<span th:text="${user.name}">Nome do usuário</span>

E o th:href para links:

html
<a th:href="@{/home}">Ir para Home</a>

Aqui está o th:src para imagens:

html
<img th:src="@{/images/logo.png}" alt="Logo">

Também temos o th:class para adicionar classes CSS:

html
<div th:class="${isActive} ? 'active' : 'inactive'">Conteúdo</div>

Call to Action

Curtiu aprender sobre Thymeleaf? Siga minhas redes sociais para mais dicas legais e tutoriais práticos! Vamos explorar mais o mundo do desenvolvimento juntos! Linkedin e Github

Hashtags

#Thymeleaf #DesenvolvimentoWeb #ProgramaçãoSpring