web-dev-qa-db-fra.com

Affichage de la navigation active basée sur des données contextuelles

J'ai le fragment séparé suivant dans un modèle Thymeleaf.

<ul class="nav nav-tabs">
    <li role="presentation"><a href="/">Freight Invoices</a></li>
    <li role="presentation"><a href="/processed">Processed Invoices</a></li>
    <li role="presentation"><a href="/postingrules">Posting Rules</a></li>
    <li role="presentation" class="active"><a href="/settings">Settings</a></li>
</ul>

Je souhaite ajouter une classe "active" à l'élément de navigation active - mais cela semble difficile à accomplir dans Thymyleaf. Aucune suggestion?

javaspringjspnavigationthymeleaf
15
thevangelist

Vous pouvez ajouter un ModelAttribute avec la valeur active dans vos contrôleurs pour chaque page, par exemple. :

SettingsController.Java 

@RequestMapping("/settings")
public String viewSettings(Model model) {
  // do stuff
  model.addAttribute("classActiveSettings","active");
  return "settings";
}

OU dans un SettingsControllerAdvice.Java 

@ControllerAdvice(assignableTypes = SettingsController.class)
public class SettingsControllerAdvice {

    @ModelAttribute("classActiveSettings")
    public String cssActivePage() {
        return "active";
    }

}

Ensuite, dans le fragment de navigation inclus dans votre settings.html :

<ul class="nav nav-tabs">
     <!-- Other links -->
    <li role="presentation" th:class="${classActiveSettings}">
       <a th:href="@{/settings}">Settings</a>
    </li>
</ul>

Enfin, vous pouvez répéter ce processus pour chaque contrôleur et chaque lien de votre barre de navigation.

11
lgd

Tu peux le faire:

<ul class="nav navbar-nav">
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="@{/dashboard}"><span>Dashboard</span></a></li>
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="@{/orders}"><span>Orders</span></a></li>
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="@{/income}"><span>Income</span></a></li>
    <li role="separator" ></li>
</ul>
47
Denger Tung

Bien que je pense que c'est une solution laide et qu'il est dommage que thymeleaf n'ait pas de macros pour cela, vous pouvez utiliser:

<li th:classappend="${#httpServletRequest.getRequestURI().startsWith('/hotels') ? 'active':''}">
    Hotel
</li>

Cela fonctionnera également pour les liens "plus profonds" tels que/hôtels/nouveau , de sorte qu'il est également utilisable pour les menus à plusieurs niveaux.

17
lukyer

bien que ce soit une vieille question, je veux partager cette solution car elle pourrait être beaucoup plus élégante!

http://nixmash.com/post/bootstrap-navbar-highlighting-in-thymeleaf

  • Ajoutez un paramètre (activeTab) au fragment de navigation.
<div th:fragment="common-navbar(activeTab)"></div>
  • transmettez sa valeur dans les pages principales qui utilisent le fragment navbar
 <div th:replace="common/navbar :: common-navbar(about)"></div>
  • vérifiez-le dans l'élément 'li' pour définir la classe 'active'
 <li th:class="${activeTab == 'about'}? 'active' : null"><a href="">About</a></li>
5
Ahmad

Pour ceux qui utilisent Thymeleaf 3:

<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/home' ? 'active' : ''}">Home</a>

Si vous avez un chemin de contexte sur votre application:

<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/context-path/home' ? 'active' : ''}">Home</a>

Modifier:

Pour être concis:

<a th:href="@{/home}" th:classappend="${#request.getServletPath() == '/home' ? 'active' : ''}">Home</a>

L’utilisation de request.getServletPath() présente l’avantage de ne pas tenir compte du chemin de contexte, s’il en existe un.

1
Rodney Kimathi