ajouter une classe active au lien avec sf2 et twig

Question

code simple suivant :

<li><a href="{{ path('_list') }}">List</a></li>

Existe-t-il un moyen simple d'ajouter un class="active" si la page actuelle correspond _list ?

en utilisant la dernière version PR de symfony2 et twig comme moteur de modèle

Answer 1

Twig permet des conditions et l'objet Request est disponible dans toute l'application. Si vous incluez le modèle, pour obtenir l'itinéraire que vous souhaitez utiliser :

app.request.attributes.get('_route')

Si vous utilisez la fonction de rendu, vous voulez utiliser :

app.request.attributes.get('_internal')

Avec cela, vous devriez être en mesure d'utiliser :

class="{% if app.request.attributes.get('_route') == '_list' %}active{% endif %}"

ou plus court :

class="{{ app.request.get('_route') == '_list' ? 'active' }}"

Answer 2

Parfois, vous ne voulez pas faire correspondre exactement un itinéraire. Pour ces cas, vous pouvez utiliser la logique conditionnelle "démarre avec" de Twig.

Par exemple, supposons que vous travaillez avec des livres. Vous avez les itinéraires suivants : book, book_show, book_new, book_edit. Vous voulez que l'élément de navigation Book soit mis en surbrillance pour l'un de ces cas. Ce code accomplirait cela.

<a class="{% if app.request.attributes.get('_route') starts with 'book' %}active{% endif %}">Books</a>
<a class="{% if app.request.attributes.get('_route') starts with 'author' %}active{% endif %}">Authors</a>

Cet exemple fonctionne avec au moins Symfony 2.3.x

Answer 3

Version la plus courte :

{% set route = app.request.get('_route') %}

 <li class="{{ route starts with 'post' ? 'open' }}"></li>
 <li class="{{ route starts with 'category' ? 'open' }}"></li>

Parfois utile :

{% set route = app.request.get('_route') %}

<li class="{{ 'post' in route ? 'open' }}"></li>
<li class="{{ 'category' in route ? 'open' }}"></li>

Answer 4

Avec opérateur ternaire :

    {% set route = app.request.attributes.get('_route') %}
    <ul class="nav navbar-nav">
        <li {{ route ==  'profile_index' ? 'class="active"' }}><a href="{{ path('profile_index') }}"><i class="icon-profile position-left"></i> My Profile</a></li>
        <li {{ route ==  'influencers_index' ? 'class="active"'}}><a href="{{ path('influencers_index') }}"><i class="icon-crown position-left"></i> Influencers</a></li>
        <li {{ route ==  'task_manager_index' ? 'class="active"'}}><a href="{{ path('task_manager_index') }}"><i class="icon-alarm-check position-left"></i> Task Manager</a></li>
    </ul>

Answer 5

Cela se fait avec la symphonie 3.4, mais probablement quelque chose de similaire peut être fait avec SF2.

src\AppBundle\Twig\AppExtension.php

<?php

namespace AppBundle\Twig;

use Symfony\Component\HttpFoundation\RequestStack;

class AppExtension extends \Twig_Extension
{
    private $requestStack;

    public function __construct(RequestStack $requestStack)
    {
        $this->requestStack = $requestStack;
    }

    public function getFunctions()
    {
        return [
            new \Twig_SimpleFunction('activeMenu', [$this, 'activeMenu'])
        ];
    }

    /**
     * Pass route names. If one of route names matches current route, this function returns
     * 'active'
     * @param array $routesToCheck
     * @return string
     */
    public function activeMenu(array $routesToCheck)
    {
        $currentRoute = $this->requestStack->getCurrentRequest()->get('_route');

        foreach ($routesToCheck as $routeToCheck) {
            if ($routeToCheck == $currentRoute) {
                return 'active';
            }
        }

        return '';
    }
}

Ajouter ceci à services.yml

services:
    #... some other services
    AppBundle\Twig\AppExtension:
        arguments: ["@request_stack"]

Utilisation :

<ul class="nav navbar-nav">
    <li class="{{ activeMenu(['form', 'edit_form']) }}"><a href="{{ path('form') }}">Form</a></li>
    <li class="{{ activeMenu(['list']) }}"><a href="{{ path('list') }}">List</a></li>
</ul>