ruby rails动态css类

Posted 2023-02-15

【中文标题】ruby rails动态css类

【英文标题】：ruby rails dynamic css clas-s-

【发布时间】：2021-10-28 21:03:02

【问题描述】：

我有一个页面，我在其中调用了我的共享组件

<%= render 'headers', positionRight: true, ...  %>

我想将positionRight 参数设为可选参数。在我的共享组件中，我无法让 css 工作

<section class=<%= (defined? positionRight && positionRight) ? "custom-css-class" : "" %>>

看起来总是落入空的css类

【参考方案1】：

我希望它总是给你custom-css-class。 (defined? positionRight && positionRight) 始终评估为 'expression'，无论 positionRight 具有什么值（如果有）。请记住，defined? 不是方法调用，它是一个关键字，而您正在给它一个表达式。

你最好在你的 ERB 文件的顶部说这样的话：

<%
  if !defined? positionRight
    positionRight = false
  end
%>

这样positionRight 将始终有一个值，然后

<section class=<%= positionRight ? 'custom-css-class' : '' %>>

当你想使用时。

【参考方案2】：

首先，defined? something 将返回某物的类型，在这种情况下，某物是positionRight && positionRight，这意味着这是一个“表达式”，因此您的逻辑将落入“custom-css-class”而不是空 css说，因为"expression" ? 总是会陷入真实情况。

其次，你的逻辑只有2种情况：true或其余（false，nil），所以无论你设置positionRight（true，false）还是不设置，下面的代码应该没问题：

positionRight ? "custom-css-class" : ""

最后但并非最不重要的一点是，如果您想要超过 3 种情况：positionRight 已定义：true 或 false 甚至 nil，而 positionRight 未定义，那么您现在可以使用 defined?，如下代码：

defined?(positionRight) ? (positionRight ? "css-align-right" : "css-align-left") : ""

【参考方案3】：

以上场景可以通过以下方式处理：

<% positionRight||= false %>
<section class=<%= positionRight ? "custom-css-class" : "" %>>

然后

<%= render 'headers', positionRight: true, ...  %>
OR
<%= render 'headers', ...  %>

【参考方案4】：

在您的视图中将其添加为文件的第一行：

<% positionRight ||= false %>
<% section_class = positionRight ? 'custom-css-class' : '' %>

现在您可以在文件中的任何位置使用您的section_class：

<section class='<%= section_class %>' >...

请注意section 元素中类的定义。您必须使用单引号，否则如果您的类名包含空格，结果 html 元素将无效。

同时，请注意您的变量 positionRight 不是以 ruby​​ 样式命名的（在 ruby​​ 中，他们通常使用蛇形盒 => position_right 会更具语义性）