Etkin_link_to ile sınırın doğrudan etkin bağlantısı nasıl konumlandırılır? Raylar 4

Question

Şu anda nav-bar bağlantılarının durumundaki değişiklikleri izlemek için active_link_to kullanıyorum. Aktif duruma stil eklediğimde, aşağıdaki resme benziyor. Aktif durum sınırını bağlantının en üstüne itmek istiyorum. Twitter'ın gezinme çubuğu, uygulamaya çalıştığım stilin iyi bir örneğidir. Son olarak, bir linkin sadece sınır aktif halini göstermesi gerektiğinde, nav-çubuğu için tüm durumların aktif olduğu görülüyor.

Awesome Font Icon Nav-Item with top-border floating to the right

HTML

<nav class="navbar navbar-dark navbar-full navbar-fixed-top bg-inverse" style="font-size: 18px;"> 
    <a class="navbar-brand" href="#"><%= image_tag 'logo.png' %></a> 
    <ul class="nav navbar-nav navbar-properties"> 
    <% if user_signed_in? %> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-commenting-o fa-3x', news_user_path(current_user), :class => 'nav-item nav-link', title: 'News', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-globe fa-3x', discovery_index_path, :class => 'nav-item nav-link', title: 'Discovery', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-list-alt fa-3x', notifications_user_path(current_user), :class => 'nav-item nav-link', title: 'Notifications', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-envelope-o fa-3x', conversations_path, style: 'color: white;', title: 'Mailbox', :class => 'nav-item nav-link' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-newspaper-o fa-3x', assignments_path, style: 'color: white;', title: 'Assignments', :active => [['assignments'], []], :class => 'nav-item nav-link' %> 
     </li> 
     <li class="pull-right account-button-push"> 
      <div class="btn-group" role="group"> 
      <a type="button" class="btn btn-secondary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: 12px;"><i class="fa fa-user fa-fw"></i> 
       Account</a> 

      <div class="dropdown-menu dropdown-menu-right"> 
       <a><%= link_to 'Edit Account', edit_user_registration_path(current_user), style: 'text-decoration: none; text-align: center;', class: 'dropdown-item' %></a> 
       <div class="dropdown-divider"> 
       </div> 
       <a><%= link_to 'Profile Settings', user_setting_path(current_user), :class => 'dropdown-item', style: 'text-align: center' %> </a> 
       <div class="dropdown-divider"></div> 
       <a><%= link_to 'Subscription', new_subscription_path(current_user), :class => 'dropdown-item', style: 'text-align: center' %></a> 
       <div class="dropdown-divider"></div> 
       <a><%= active_link_to 'Sign out', destroy_user_session_path, :method => :delete, :class => 'dropdown-item', strong: true, style: 'text-align: center' %></a> 
      </div> 
      </div> 
     </li> 
     <li class="pull-right"> 
      <%= active_link_to new_post_path, :class => 'btn btn-success', style: 'line-height: -4px;', remote: true, data: { :toggle => 'modal', :target => '#myModal'} do %> 
       <div style="margin-top:4px;"><i class="fa fa-crosshairs"></i> New Experience</div> 
      <% end %> 
     </li> 
     <li class="pull-right round-image-50-placement-fix"> 
      <%= link_to(image_tag(current_user.avatar_url(:thumb), class: 'round-image-50'), current_user) %> 
     </li> 
    <% else %> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-home fa-2x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-sign-in fa-2x', login_path, :class => 'nav-item nav-link', title: 'Sign in' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-user-plus fa-2x', new_user_registration_path, :class => 'nav-item nav-link', title: 'Register' %> 
     </li> 
     <li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-info fa-2x', about_path, :class => 'nav-item nav-link', title: 'About' %> 
     </li> 
    <% end %> 
    </ul> 
</nav> 

Awesome_link hem acti kullanabilirsiniz mi merak ediyorum

<a href="/"><i class="fa fa-arrow-circle-o-up"></i></a> 

CSS

nav a.active { 
     border-style: solid; 
     border-top: thick solid #27CCC0; 
    } 

Answer 1

aşağıdaki bağlantıyı etiketi oluşturur Aynı bağlantı için ve_link_to ve awesome_link, her ikisi de a öğesini oluşturuyor.

<li class="nav-item"> 
      <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %> 
     </li> 

<li class="nav-item"> 
      <%= active_link_to '<i class="ffa fa-home fa-3x" style="color:white"></i>', home_path, :class_active => 'nav-link active', :class_inactive => 'nav-link' %> 
    </li>