具有默认值的 Laravel 条件顺风类

Posted 2023-03-07

【中文标题】具有默认值的 Laravel 条件顺风类

【英文标题】：Laravel conditional tailwind class with default value

【发布时间】：2021-10-24 19:54:05

【问题描述】：

我制作了一个组件，我希望它具有不同的颜色。

如果我没有传递颜色，我希望默认为蓝色。

我设法通过以下方式做到了这一点：

<div class="text-$color ?? 'blue'-400"></div>

但现在我在检查 2 个案例时遇到了问题：

<div class=" isset($bg) ? "text-$color ?? 'blue'-100" : "text-$color ?? 'blue'-600" "></div>

如果设置了背景图像 - 在阴影 100 中以传递的颜色显示文本。如果没有背景图像，则在阴影 600 中设置文本。（如果没有传递颜色，则使用默认的“蓝色”阴影）

我收到此错误：

语法错误，意外'??' (T_COALESCE)，期待 :: (T_PAAMAYIM_NEKUDOTAYIM)

【参考方案1】：

清除 CSS 时，字符串连接不起作用。在清除期间，它不会考虑您的逻辑（它只按原样读取字符串），因此很可能会清除这些类。 TailwindCSS docs 中提到了这一点。

我的建议是将其存储在刀片组件中，并仅使用 switch-case 语句来创建变体。它会导致重复，但至少您会将所有内容仅存储在一个地方：

@switch($color ?? null)
  @case('red')
    <div class=" isset($bg) ? 'text-red-100' : 'text-red-600' "></div>
    @break

  @case('green')
    <div class=" isset($bg) ? 'text-green-100' : 'text-green-600' "></div>
    @break

  @default
    <div class=" isset($bg) ? 'text-blue-100' : 'text-blue-600' "></div>
@endswitch

【参考方案2】：

我假设它是刀片模板，所以您可以在使用之前将$color 的值设置为默认值（如果它为空）。

如果它是一个组件类，你可以在组件中这样做，否则你可以使用@php 指令来设置变量值并使用与在类中相同的代码：

@php
    $color = $color ?? "blue";
@endphp
<div class=" isset($bg) ? "text-$color-100" : "text-$color-600" "></div>

请注意，在 TailwindCSS 类名中使用变量将使 purge / JiT 无法处理它们。您可以在 Tailwind here 中阅读有关为生产优化编写适当 CSS 的信息。

【讨论】：

是的，它是刀片。我很困惑为什么我可以使用？？第一个示例中的语法，我不能在三元 IF 中使用它？我正在使用 JIT，感谢您的参考！

我也希望颜色是动态的。按照参考，我只能有 2 种颜色。如果我传递红色字符串，我如何在没有连接的情况下调整所有背景文本和该阴影中的所有内容：/

我猜这与字符串插值有关。空合并运算符是一种语法糖，所以我猜解释器只是不知道该怎么做。如果你想直接在class= 中使用它，你可以使用字符串连接而不是插值。像这样： isset($bg) ? "text-" . ($color ?? 'blue') . "-100" : "text-" . ($color ?? 'blue') . "-600" 。然后在连接之前使用?? 运算符（因为括号）。

您能详细解释一下这个红色字符串吗？我不确定我是否理解正确，但我认为如果您想要更灵活，整个颜色生成不应该在 三元 if 中完成。

我的意思是如果我通过 'color' => 'purple' - 我希望与颜色相关的所有内容都是紫色（背景、文本颜色、边框颜色等）。如果我通过 'color' => 'red'，一切都是红色的。我想用 $color 变量来做到这一点，而不是连接以匹配顺风类名。但现在我发现 JIT 和清除存在问题，所以我想知道实现这一目标的最佳方法是什么。