[Ruby on Rails 5] アクティブなメニューに .active CSS Class を付与するヘルパー
現在地を示す CSS class を付与する。
こちらを参考にさせて頂きました。
params[:controller]
, params[:action]
の値が指定値と同じであれば、active
を返すヘルパーを作成します。
module ApplicationHelper
def active_controller?(controller_name)
params[:controller] == controller_name ? 'active' : nil
end
def active_controllers?(controller_names)
controller_names.include?(params[:controller]) ? 'active' : nil
end
def active_action?(action_name)
params[:action] == action_name ? 'active' : nil
end
def active_actions?(action_names)
action_names.include?(params[:action]) ? 'active' : nil
end
def active_controller_and_action?(controller_name, action_name)
if params[:controller] == controller_name && params[:action] == action_name
return 'active'
end
nil
end
end
View で利用します。
Bootstrap のサイドバーであれば、こんな形でしょうか。
app/controllers/reports_controller.rb
が呼ばれていれば、.active
が付与されます。
該当しなければ nil
が返るので、if
文でも利用できますね。
%li{class: "nav-item #{active_controllers?('reports')}"}
= link_to '#', {class: 'nav-link'} do
Reports
- if active_controllers?('reports')
%span.sr-only (current)