时间戳

首页 > 解决方案 > 我可以在 nextjs 中有一个多色单选按钮吗？

colors - 我可以在 nextjs 中有一个多色单选按钮吗？

问题描述

我想制作一个单选按钮来确定错误的严重性，分别是：低、中、高和严重，每个按钮都有根据其严重性的颜色（即从低到严重：石灰、黄色、橙色和红色）我只找到了可以自定义所有单选按钮的方法，但不是每个单独的按钮。此外，Nextjs 的“纯选择器”限制使得想出解决方案变得更加困难

标签： colorsradio-buttonnext.js

解决方案

查看您链接的教程，这将设置单选按钮的颜色：

.custom-radio-btn .checkmark {
  --check-color: #ff5722; 
}

因此，修改颜色所需要做的就是创建具有相似特性的选择器，如下所示：

.custom-radio-btn .low {
    --check-color: lime;
}

.custom-radio-btn .medium {
    --check-color: yellow;
}

.custom-radio-btn .high {
    --check-color: orange;
}

并有条件地将适当的类应用于元素，例如：

  <label class="custom-radio-btn left">
    <span class="label">Medium</span>
    <input type="radio" name="sample" />
    <span
      class={`checkmark ${
        error && error.severity == "low"
          ? "low"
          : error.severity == "medium"
          ? "medium"
          : "high"
      }`}
    ></span>
  </label>

看看这个codepen。

推荐阅读