Phoenix 动态类名 Phoenix.HTML答案

【问题标题】：Phoenix dynamic classnames Phoenix.HTMLPhoenix 动态类名 Phoenix.HTML
【发布时间】：2022-01-13 23:34:57
【问题描述】：

我想加入一个动态类名和一个静态类名。

<div class=<%="#{getClass(app.status)} two" %>

这会导致

<div class="one" two>

代替

<div class="one two">

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

如果您在 Elixir 中使用 Phoenix，可以这样：

<div class={"fixed-left #{if @current_user do 'login-page' end}"}>

【讨论】：

【解决方案2】：

您应该使用<div class="<%= getClass(app.status)} %> two">。
<%= %> 评估 Elixir 代码并将结果注入 HTML 的任何部分。
您可以在 HTML 标记中注入值：

<div>
  <%= @user_name %>
</div>

或任何 HTML 属性

<a class="btn <%= if(@alert, do: "btn-danger", else: "btn-primary") %>">...</a>

或者设置 HTML 属性

<button class="btn btn-success" <%= if(@disable_button, do: "disabled", else: "tooltip=\"button is working\"") %>">...</button>

【讨论】：