Add an 'active' class to all active links in rails?

后端 未结 7 591
醉酒成梦
醉酒成梦 2021-02-05 15:08

Basically, I have a lot of code that looks like this:

link_to t(\'.profile\'), business_path(@business), class: \'#{\'active\' if current_page? business_path(@bu         


        
相关标签:
7条回答
  • 2021-02-05 15:37

    I wrote simple helper method using build in view helper current_page? when you can specify custom class name in html_options hash.

    def active_link_to(name = nil, options = nil, html_options = nil, &block)
      active_class = html_options[:active] || "active"
      html_options.delete(:active)
      html_options[:class] = "#{html_options[:class]} #{active_class}" if current_page?(options)
      link_to(name, options, html_options, &block)
    end
    

    Examples (when you are on root_path route):

    <%= active_link_to "Main", root_path %>
    # <a href="/" class="active">Main</a>
    
    <%= active_link_to "Main", root_path, class: "bordered" %>
    # <a href="/" class="bordered active">Main</a>
    
    <%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %>
    # <a href="/" class="bordered disabled">Main</a>
    
    0 讨论(0)
  • 2021-02-05 15:40

    Use link_to_unless_current and then give it the look of an active link in CSS.

    0 讨论(0)
  • 2021-02-05 15:43

    I faced same requirement and here is my solution.

    Create a method within ApplicationHelper

    def active_class(link_path)
        current_page?(link_path) ? "active" : ""
    end
    

    And inside your view:

        <li class="<%= active_class('/') %>">
          <%= link_to 'HOME', root_path %>
        </li>
    
    0 讨论(0)
  • 2021-02-05 15:47

    Here's the helper I use. I add an optional "match_text" parameter for added flexibility (for instance, if I want to mark a link as active when the actual request path is a child page of the link's destination.)

    def link_to_active(text, destination, options = {})
      match_text = options.delete(:match_text)
    
      classes = options[:class].present? ? options[:class].split(" ") : []
      classes << "active" if request.fullpath.downcase == destination.downcase || (match_text && request.fullpath.downcase.include?(match_text.downcase))
    
      options = options.except(:class)
      options.merge!(:class => classes.join(" ")) unless classes.empty?
    
      link_to(text, destination, options)
    end
    
    0 讨论(0)
  • 2021-02-05 15:52

    I did the same that @egyamado. I needed to use AwesomeIcons too, so:

    A helper:

    def active_class?(link_path)
        'active' if current_page?(link_path)
    end
    

    And it was my view:

     <%= link_to my_controller_page_path,
        :title => "My Controller Page",
        :class => "other_name_class #{active_class?(my_controller_page_path)}" do  %>
                    <i class="fa fa-fighter-jet"></i>&nbsp;My Controller Page
    <%end%>
    

    In another kind of Link, for example inside a Li.

    #In this case I put a extra validation in root_path
    <li class="nav-class <%=active_class?(my_controller_page_path)%> <%='active' if current_page?(root_path) %>">
      <%= link_to my_controller_page_path,
          :title => "Page 1",
          :class => "other_name_class" do  %>
          Page 1
      <%end%>
    </li>
    <li class="nav-class <%=active_class?(my_controller_page_2_path)%>">
      <%= link_to my_controller_page_2_path,
          :title => "Page 2",
          :class => "other_name_class" do  %>
          Page 2
      <%end%>
    </li> 
    

    It worked for me.

    0 讨论(0)
  • 2021-02-05 15:58

    It's a solved problem, just use active_link_to gem. Your example simplifies to this:

    = active_link_to t('.profile'), business_path(@business)
    
    0 讨论(0)
提交回复
热议问题