ruby-on-rails - popper - rails add bootstrap 4

Agregue dinámicamente clase activa a bootstrap li en Rails

Question

en la barra de navegación de bootstrap. Puede obtener el efecto de hacer clic en un botón agregando la clase active . Naturalmente, quiero usar esto en mis páginas. Por ejemplo, si estoy en la página sobre nosotros, queremos que se haga clic en el botón Acerca de nosotros.

¿Cuál es la mejor manera de hacerlo? Iba a ir a cada página y en la parte inferior tenía una función jQuery para agregarle la clase active . ¿Hay una mejor manera?

Answer 1

¿Por qué limitarse a solo li elementos? ¿Y por qué no es compatible con múltiples nombres de clase junto con active ? Esta solución me permite:

• Admite no solo texto plano, sino HTML dentro de link_to (por ejemplo, agrega un icono dentro del enlace)
• Agregue solo algunas líneas de código a application_helper.rb
• Agregar active al nombre de clase completo del elemento de enlace en lugar de ser la única clase.

Entonces, agregue esto a application_helper.rb :

def active_class?(class_name = nil, path)
  class_name ||= ""
  class_name += " active" if current_page?(path)
  class_name.strip!
  return class_name
end

Y en su plantilla puede tener algo como esto:

<div class="col-xs-3">
  <%= link_to root_path, :class => active_class?("btn btn-outline-primary", root_path) do %>
    <i class="fa fa-list-alt fa-fw"></i>
  <% end %>
</div>

También puede especificar o no un nombre de class_name y usarlo así:

<li class="<%= active_class?(root_path) %>">Home</li>

Gracias a las respuestas anteriores 1 , 2 y resources .

Answer 2

Lee sobre current_page? here

Puede agregar un método para manejar la lógica con current_page? , ejemplo, un método:

module ApplicationHelper

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

end

ejemplo de plantilla de barra de navegación bootstrap

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Entonces, en vista se ve como

HTML

<li class="<%= active_class(some_path) %>">
<%= link_to "text of link", some_path %>
</li>

HAML

%li{:class => active_class(some_path)}
  = link_to "text of link", some_path

O puede usar request.fullpath para obtener la ruta actual llena de ruta si una ruta actual tiene un parámetro

ejemplo

<ul>
 <% Contry.all.each do |c| %>
  <li class="snavitem <%= active_class(contry_path(c)) %>">
    <%= link_to "show #{c.name}", contry_path(c) %>
  </li>
 <% end %>
</ul>

y en su application_helper.rb

def active_class(link_path)
  request.fullpath == link_path ? "active" : "" 
end

lea sobre request.fullpath here

Answer 3

Para cualquiera que tenga problemas para dar sentido a esto, aquí hay un ejemplo con mis rutas y nombres de archivos establecidos explícitamente. Como una persona muy nueva a los rieles, estaba teniendo problemas para resolverlo. Gracias a las otras personas que respondieron anteriormente, ¡ya que me ayudó a resolverlo!

Coloqué la barra de navegación de Bootstrap en mi archivo application.html.erb:

<div class="navbar-header">

  <a class="navbar-brand" href="/">Mapper</a>
  <ul class="nav navbar-nav">

    <li class="<%= is_active?(''/'') %>"><%= link_to "Home", ''/'' %></li>
    <li class="<%= is_active?(''/main/map'') %>"><%= link_to "Map", ''/main/map'' %></li>
    <li class="<%= is_active?(''/main/about'') %>"><%= link_to "About", ''/main/about'' %></li>

  </ul>
</div>

Esto va en el archivo application_helper.rb:

module ApplicationHelper

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

end

¡Eso es! Ahora su aplicación agregará dinámicamente la clase ''activa'' a la página que esté viendo actualmente (es decir, su correspondiente elemento de lista en la barra de navegación). Esto es mucho más simple (y más SECO) que agregar la barra de navegación manualmente a cada página (ver) y luego actualizar la clase ''activa''.

Answer 4

Por favor intente esto en cada página, revise el cotrollero o acción y agregue el css

Por ejemplo:

<li class= <%= (controller.controller_name.eql?(''pages'') && controller.action_name.eql?(''index'') )? ''active'':''''%> ><%= link_to ''my page'', pages_path%></li>

Answer 5

Puede definir un método de ayuda en application_helper.rb

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

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

Ahora puedes usar como:

create_link ''xyz'', any_path que se mostraría como <li class="active"><a href="/any">xyz</a></li>

¡Perfecto para la navegación de bootstrap!

Answer 6

Voy a publicar mi respuesta que creé sobre la base de estos otros porque en el caso de las vistas de CRUD la clase activa no se ha colocado.

module ApplicationHelper
 def active_class(name)
   controller_name.eql?(name) || current_page?(name) ? ''active'' : ''''
 end
end

Mis puntos de vista usan algo como esto:

  <ul class="nav navbar-nav">
    <li class="nav-item <%= active_class(''/'') %>">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item <%= active_class(''leads'') %>">
      <a class="nav-link" href="/leads">Leads</a>
    </li>
  </ul>
  <ul class="nav navbar-nav pull-right <%= active_class(edit_user_registration_path) %>">
    <li class="nav-item ">
      <a class="nav-link" href="/users/edit">Perfil</a>
    </li>
    <li class="nav-item">
      <%= link_to(''Sair'', destroy_user_session_path, method: :delete) %>
    </li>
  </ul>

Answer 7

en mi opinión, una manera más limpia de lograr eso es escribir un método link_to_in_li en application_helper.rb:

def link_to_in_li(body, url, html_options = {})
  active = "active" if current_page?(url)
  content_tag :li, class: active do
    link_to body, url, html_options
  end
end

entonces úsalo de esta manera

<%= link_to_in_li "Home", root_path, id: "home_link" %>

Encuentro que el código dentro de li un poco difícil de leer.