web-dev-qa-db-fra.com

Le meilleur moyen de mettre en évidence la page actuelle dans Rails 3? - appliquer une classe css aux liens de manière conditionnelle

Pour le code suivant:

<%= link_to "Some Page", some_path %>

Comment appliquer une classe css current à l'aide de la méthode d'assistance current_page?‎?

Ou si un autre meilleur moyen est disponible?

ruby-on-railsrubyruby-on-rails-3ruby-on-rails-3.1
47
Jacob

Dans app/helpers/application_helper.rb

def cp(path)
  "current" if current_page?(path)
end

Dans vos vues:

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

Fondamentalement, écrivez un simple emballage autour de lui. En outre, vous pouvez étendre la méthode pour autoriser l’application de classes supplémentaires en ajoutant des arguments. Garde les vues concises/sèches. Ou, sans étendre la méthode, vous pouvez simplement effectuer une interpolation de chaîne simple, comme pour ajouter des classes supplémentaires:

<%= link_to "All Posts", posts_path, class: "#{cp(posts_path)} additional_class" %>
89
Michael van Rooijen

Dans mon cas, j'ai beaucoup de contrôleurs avec un nom d'espacement, c'est pourquoi j'aime montrer si la vue actuelle est également dans le chemin du menu. J'avais utilisé la solution de Michael van Rooijen, puis je l'ai personnalisée pour mon cas.

Assistant

def cp(path)
  "current" if request.url.include?(path)
end

Vue

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

Maintenant, si ma barre de menu est/users et que ma page actuelle est/users/10/post, le lien/users est défini avec la classe "current" 

18
rderoldan1

Je me suis écarté de la réponse de Michael et ai modifié l'assistant:

def active_class?(*paths)
  active = false
  paths.each { |path| active ||= current_page?(path) }
  active ? 'active' : nil
end

Voici comment vous l'utiliseriez:

<%= link_to "Bookings", bookings_path, class: active_class?(bookings_path) %>

Vous pouvez lui passer plusieurs chemins au cas où vous auriez un onglet pouvant être rendu par plusieurs vues:

<%= content_tag :li, class: active_class?(bookings_path, action: 'new') %>

Et l’avantage de cela, c’est que si les conditions sont false, le résultat sera inséré nil. Pourquoi est-ce bon? Eh bien, si vous fournissez class avec nil, cela n'inclura pas l'attribut de classe sur la balise. Prime!

10
Eric Boehs

Dans l’intérêt de ne pas trop vous répéter en vérifiant tout le temps current_page dans la méthode link_to, voici une aide personnalisée que vous pouvez utiliser (mettez ceci dans app/views/helpers/application_helpers.rb

def link_to_active_class(name, active_class_names, options = {}, html_options = {}, &block)
  html_options[:class] = html_options[:class].to_s + active_class_names if current_page?(options.to_s)
  link_to name, options, html_options, &block
end

Exemple d'utilisation:

<div> <%= link_to_active_class('Dashboard', 'bright_blue', dashboard_path, class: 'link_decor') </div>

si vous êtes sur http://example.com/dashboard, alors il devrait retourner:

<div> <a href='/dashboard' class='link_decor bright_blue'>Dashboard</a> </div>

Cordialement.

4
Nik So

Je le ferais de cette façon:

<%= link_to "Some Page", some_path, :class => current_page? ? "current" : "" %>
3
thoferon

J'ai essayé de combiner quelques-unes des techniques mentionnées avec mes propres besoins.

def current_page(path)
  'current' if current_page?(path)
end

def create_nav_link(string, path, method)
  link_to string, path, data: { hover: string }, method: method
end

def create_nav_item(string, path, method = nil)
  content_tag :li, create_nav_link(string, path, method), class: current_page(path)
end

En gros, cela vous permet de l’utiliser comme ceci: create_nav_item("profile", profile_path), ce qui donnera: <li><a href="/profile" data-hover="Profile">Profile</a></li>,

ou <li class="current"><a href="/profile" data-hover="Profile">Profile</a></li> s'il s'agit de la page en cours.

Je n'ai pas utilisé request.url.include?(path), car le bouton "Accueil" sera toujours mis en surbrillance et je ne pouvais pas penser à une solution de loin.

0
Glubi

Je pense que si ce serait une bonne idée de générer un link_to complet à partir de votre méthode d'assistance Pourquoi répéter le même code (principe :-) DRY)

def create_link(text, path)
  class_name = current_page?(path) ? 'current' : 'any_other_class'

  link_to text, path, class: class_name
end

Maintenant, vous pouvez utiliser comme:

<%= create_link 'xyz', any_path %> (dans les vues) qui rendrait comme <a href="/any" class="current">xyz</a>

J'espère que ça aide!

0
Dusht

Une variante de la solution Eric Boehs (la plus robuste à mon humble avis), si vous liez directement à un objet de la classe (c’est-à-dire que vous ne montrez pas l’index), avec un assistant d’application ajouté:

def booking_link
 Booking.find(8)
end

Vous pouvez utiliser les éléments suivants dans la vue (le dd est utilisé dans le contexte de zurb foundation)

<%= content_tag :dd, link_to(t('hints.book'), booking_link), class: active_class?(booking_path) %>-
0
Jerome