48 votes

La meilleure façon de mettre en valeur actuelle de la page dans Rails 3? - appliquer une classe css pour les liens conditionnellement

Pour le code suivant:

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

Comment puis-je appliquer une classe css current à l'aide de l' current_page?‎ méthode d'aide?

Ou si un autre de meilleure façon est-il disponible?

90voto

Michael van Rooijen Points 3112

Dans app/helpers/application_helper.rb

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

Dans votre point de vue:

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

Fondamentalement écrire un simple wrapper autour d'elle. En plus, vous pouvez étendre la méthode pour permettre à d'autres classes d'être appliquée par l'ajout d'arguments. Maintient le point de vue concise/sec. Ou, sans extension de la méthode, vous pourriez faire simple Chaîne d'interpolation comme pour ajouter d'autres classes:

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

18voto

rderoldan1 Points 761

Dans mon cas, j'ai beaucoup de nom espacés les contrôleurs, c'est pourquoi je tiens à montrer que si le point de vue actuel est aussi dans le Menu Chemin, j'ai dû utiliser la solution de Michael van Rooijen puis-je personnaliser pour mon cas.

Helper

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 /utilisateurs et ma page actuelle est /users/10/post aussi le lien /utilisateurs est défini avec le "courant" de la classe

11voto

Eric Boehs Points 371

J'ai bifurqué de Michael réponse et tordu le helper:

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

Voici comment vous pouvez utiliser:

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

Vous pouvez passer plusieurs chemins d'accès dans le cas où vous avez un onglet qui pourrait être rendu par plusieurs points de vue:

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

Et la grande chose au sujet de ceci est que si les conditions sont false, il va insérer nil. Pourquoi est-ce bon? Eh bien, si vous fournissez class avec nil il ne comprend pas l'attribut class de la balise à tous. Bonus!

5voto

Nik Points 3377

Dans l'intérêt de ne pas avoir à répéter votre auto trop d'avoir à vérifier current_page à l'intérieur de l' link_to méthode de tous les temps, voici un helper personnalisé que vous pouvez utiliser (mettre cela en 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 qu'il doit retourner:

<div> <a href='http://stackoverflow.com/dashboard' class='link_decor bright_blue'>Dashboard</a> </div>

Ce qui concerne.

4voto

thoferon Points 2776

J'aimerais faire de cette façon :

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X