☰

Phoenixの現在のページの場合、要素にCSSクラスを適用する質問する

tag-icon • tag-icon elixir phoenix-framework
Phoenixの現在のページの場合、要素にCSSクラスを適用する質問する

現在、ページがアクティブな場合に CSS クラスを追加しようとしています。現在 Phoenix でこれを行う最適な方法は何ですか? この場合のヘルパーはありますか?

def active(option, conn) do
  if option == conn.request_path do
    " class=\"active\""
  else
    ""
  end
end

テンプレート内:

<%= "contact" |> active(@conn) |> raw %>

ベストアンサー1

conn.path_infoの代わりに、現在のパスを文字列のリストとして返す を使用しますconn.request_path。これを使用してヘルパーを取得できますactive_class。

def active_class(conn, path) do
  current_path = Path.join(["/" | conn.path_info])
  if path == current_path do
    "active"
  else
    nil
  end
end

次のように使用します:

<%= link "Users", to: user_path(@conn, :index), class: active_class(@conn, user_path(@conn, :index))%>

上記を 2 回実行していることに注意してくださいuser_path/2。別のヘルパーを使用してこれを DRY 化できます。

def active_link(conn, text, opts) do
  class = [opts[:class], active_class(conn, opts[:to])]
          |> Enum.filter(& &1) 
          |> Enum.join(" ")
  opts = opts
         |> Keyword.put(:class, class)
  link(text, opts)
end

conn.path_infoの代わりにを使用するのはなぜでしょうconn.request_pathか。これは、conn.request_pathがユーザーが要求した正確なパスを返すためです。ユーザーがパス にアクセスすると/foo/、conn.request_pathが返されます/foo/。ここで問題となるのは、比較するルーター ヘルパーが常に/foo末尾の のないパスを返すことです/。

お役に立てれば幸いです。不明な点があればお知らせください。

おすすめ記事