ruby on rails - multiple - ¿La mejor manera de resaltar la página actual en Rails 3?-aplicar una clase css a enlaces condicionalmente

rails link_to controller action

Question

Para el siguiente código:

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

¿Cómo aplico una current clase css usando el método current_page?‎ Helper?

O si hay alguna otra manera mejor disponible?

Answer 1

Con el interés de no tener que repetirse demasiado al tener que verificar current_page dentro del método link_to todo el tiempo, aquí hay un ayudante personalizado que puede usar (ponga esto 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

Ejemplo de uso:

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

si está en http://example.com/dashboard , debe devolver:

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

Saludos.

Answer 2

Creo que sería una buena idea si genera un link_to entero desde su método de ayuda. Por qué repetir el mismo código (:-) principio DRY)

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

  link_to text, path, class: class_name
end

Ahora puedes usar como:

<%= create_link ''xyz'', any_path %> (en vistas) que se representaría como <a href="/any" class="current">xyz</a>

¡Espero eso ayude!

Answer 3

En la aplicación / helpers / application_helper.rb

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

En tus puntos de vista:

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

Básicamente, escribe una envoltura simple a su alrededor. Además, puede ampliar el método para permitir que se apliquen clases adicionales agregando argumentos. Mantiene las vistas concisas / secas. O bien, sin extender el método, puede hacer una simple interpolación de cadenas como para agregar clases adicionales:

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

Answer 4

En mi caso, tengo muchos controladores espaciados, por eso me gusta mostrar si la vista actual también está en la ruta del menú, tuve que usar la solución de Michael van Rooijen y luego la personalicé para mi caso.

Ayudante

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

Ver

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

Ahora si mi barra de menú es / users y mi página actual es / users / 10 / post también el link / users está configurado con la clase "current"

Answer 5

Lo haría de esta manera:

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

Answer 6

Me ramifiqué de la respuesta de Michael y pellizqué al ayudante:

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

Así es como lo usarías:

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

Puede pasarle varias rutas en caso de que tenga una pestaña que podría ser representada por varias vistas:

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

Y lo bueno de esto es que si las condiciones son false , insertará nil . ¿Por qué es esto bueno? Bueno, si proporciona class con nada, no incluirá el atributo de clase en la etiqueta. ¡Prima!

Answer 7

Traté de combinar algunas de las técnicas mencionadas con mis propias necesidades.

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

Básicamente, le permite usarlo así: create_nav_item("profile", profile_path) que dará como resultado: <li><a href="/profile" data-hover="Profile">Profile</a></li> ,

o <li class="current"><a href="/profile" data-hover="Profile">Profile</a></li> si esta es la página actual.

No request.url.include?(path) ya que también siempre resaltará el botón "Home", y no se me ocurrió nada.

Answer 8

Una variante de la solución de Eric Boehs (la más sólida en mi humilde opinión), si está vinculando directamente a un objeto de la clase (es decir, no muestra el índice), con un ayudante de aplicación adicional:

def booking_link
 Booking.find(8)
end

Puede usar lo siguiente en la vista (el dd se usa en el contexto de la fundación zurb)

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