it-swarm.com.de

Beste Möglichkeit, die aktuelle Seite in Rails 3 hervorzuheben? - wendet eine CSS-Klasse unter bestimmten Bedingungen auf Links an

Für den folgenden Code:

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

Wie wende ich eine css-Klasse current mit der current_page?‎-Hilfsmethode an?

Oder wenn es einen anderen besseren Weg gibt?

47
Jacob

In app/helpers/application_helper.rb

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

In deinen Ansichten:

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

Grundsätzlich schreiben Sie einen einfachen Wrapper. Zusätzlich können Sie die Methode erweitern, um die Anwendung zusätzlicher Klassen durch Hinzufügen von Argumenten zu ermöglichen. Hält die Aussicht kurz und trocken. Wenn Sie die Methode nicht erweitern, können Sie einfach eine einfache String-Interpolation durchführen, um zusätzliche Klassen hinzuzufügen:

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

In meinem Fall habe ich viele Controller mit Namenstrennung. Deshalb zeige ich gerne, ob sich die aktuelle Ansicht auch im Menüpfad befindet. Ich hatte die Lösung von Michael van Rooijen verwendet und kann dann für meinen Fall anpassen.

Helfer

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

Aussicht

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

Wenn nun meine Menüleiste/Benutzer ist und meine aktuelle Seite/Benutzer/10/Post ist, wird auch der Link/Benutzer mit der "aktuellen" Klasse festgelegt 

18
rderoldan1

Ich zog von Michaels Antwort ab und bearbeitete den Helfer:

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

So verwenden Sie es:

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

Sie können mehrere Pfade übergeben, falls Sie eine Registerkarte haben, die von mehreren Ansichten dargestellt werden kann:

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

Und das Tolle daran ist, wenn die Bedingungen false sind, wird nil eingefügt. Warum ist das gut? Wenn Sie class mit nil angeben, wird das Klassenattribut nicht in das Tag aufgenommen. Bonus!

10
Eric Boehs

Damit Sie sich nicht zu oft wiederholen müssen, indem Sie current_page ständig in der link_to-Methode überprüfen müssen, haben Sie hier einen benutzerdefinierten Helfer, den Sie verwenden können (in app/views/helpers/application_helpers.rb einfügen).

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

Verwendungsbeispiel:

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

wenn Sie sich http://example.com/dashboard befinden, sollte Folgendes zurückgegeben werden:

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

Grüße.

4
Nik So

Ich würde es so machen:

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

Ich habe versucht, einige der genannten Techniken mit meinen eigenen Bedürfnissen zu kombinieren.

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

Grundsätzlich erlaubt es Ihnen, es so zu verwenden: create_nav_item("profile", profile_path), was Folgendes ergibt: <li><a href="/profile" data-hover="Profile">Profile</a></li>,

oder <li class="current"><a href="/profile" data-hover="Profile">Profile</a></li>, wenn dies die aktuelle Seite ist.

Ich habe request.url.include?(path) nicht verwendet, da hier auch immer die Schaltfläche "Home" hervorgehoben wird. Ich kann mir bei weitem keine Umgehung vorstellen.

0
Glubi

Ich denke, wäre eine gute Idee, wenn Sie ganze link_to von Ihrer Hilfsmethode generieren. Warum denselben Code wiederholen (:-) DRY Prinzip)

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

  link_to text, path, class: class_name
end

Jetzt können Sie wie folgt verwenden:

<%= create_link 'xyz', any_path %> (in Ansichten), die als <a href="/any" class="current">xyz</a> dargestellt würde

Ich hoffe es hilft!

0
Dusht

Eine Variante der Eric Boehs-Lösung (die robusteste IMHO), wenn Sie direkt mit einem Objekt der Klasse verbunden sind (d. H. Sie zeigen den Index nicht), und zwar mit einem hinzugefügten Anwendungshelfer:

def booking_link
 Booking.find(8)
end

Sie können Folgendes in der Ansicht verwenden (das dd wird im Rahmen der zurb-Stiftung verwendet)

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