web-dev-qa-db-fra.com

ajouter une classe active pour lier avec sf2 et twig

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 route?

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

phpurlsymfonytwig
33
choise

Twig permet les 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 souhaitez utiliser:

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

Avec cela, vous devriez pouvoir utiliser:

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

ou plus court:

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

Parfois, vous ne voulez pas faire correspondre exactement un itinéraire. Pour ces cas, vous pouvez utiliser la logique conditionnelle "commence par" de twig.

Par exemple, supposons que vous travaillez avec des livres. Vous disposez des itinéraires suivants: book, book_show, book_new, book_edit. Vous souhaitez que l'élément de navigation Livre 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

21
John Kramlich

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>
19
Max Lipsky

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>
8
Yuriy Korman

Cela se fait avec symfony 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 '';
    }
}

Ajoutez ceci à services.yml

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

Usage:

<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>
4
Darius.V

j'ai trouvé un très bon bundle qui gère tous ces trucs automatiquement:

https://github.com/KnpLabs/KnpMenuBundle

3
choise

Symfony2.3, dans Twig, essayez ceci pour obtenir uri:

{{ dump(app.request.server.get("REQUEST_URI")) }}
1
Degas

SF2.2

{{ dump(app.request.server.get('PATH_INFO')) }}
1
Karol Gontarski