Tailwind 和 Alpine.js 单选按钮样式

Question

我有一个尺码选择器，如下所示，我正在尝试使样式与 Alpine.js 配合使用，以便所选尺码突出显示。

什么是正确的代码 Alpine.js 要添加的代码类取决于是否选中单选框：

Checked: "bg-indigo-600 border-transparent text-white hover:bg-indigo-700"
Not Checked: "bg-white border-gray-200 text-gray-900 hover:bg-gray-50"

<fieldset>
  <legend>Choose size</legend>
  <div class="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-4">
    <label
      for="small"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      x-data="{ isChecked: false }"
      :aria-checked="isChecked"
      :class="{'bg-indigo-600 border-transparent text-white hover:bg-indigo-700': isChecked, 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50': !isChecked }"
      @click="isChecked = !isChecked"
    >
      <input id="small" type="radio" name="size-choice" value="s" class="sr-only" aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Small
      </p>
    </label>

    <label
      for="medium"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      x-data="{ isChecked: false }"
      :aria-checked="isChecked"
      :class="{'bg-indigo-600 border-transparent text-white hover:bg-indigo-700': isChecked, 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50': !isChecked }"
      @click="isChecked = !isChecked"
    >
      <input id="medium" type="radio" name="size-choice" value="m" class="sr-only" aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Small
      </p>
    </label>

  </div>
</fieldset>

Answer 1

我建议使用通用 size 变量并通过 x-model 将其绑定到单选输入元素。当前，您拥有的独立 isChecked 状态与您拥有的按钮数量一样多，我猜这不是预期的行为。

修改示例：

<fieldset x-data="{size: null}">
  <legend>Choose size</legend>
  <div class="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-4">
    <label for="small"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      :aria-checked="size == 's'"
      :class="size == 's' ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50'">
      <input x-model="size" id="small" type="radio" name="size-choice" value="s" class="sr-only" aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Small
      </p>
    </label>

    <label for="medium"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      :aria-checked="size == 'm'"
      :class="size == 'm' ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50'">
      <input x-model="size" id="medium" type="radio" name="size-choice" value="m" class="sr-only"
        aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Medium
      </p>
    </label>
  </div>
</fieldset>

我刚刚用建议的方法替换了所有选择检查。此外，将 @click 事件添加到标签会导致我出现一些奇怪的双击行为。添加一个 @click.prevent 修饰符解决了这个问题，但是之后 radio 元素没有收到点击事件。我的建议避免了这个问题，因为无线电输入元素本身成为了信息的来源。

Tailwind 和 Alpine.js 单选按钮样式

Tailwind & Alpine.js radio button styling

javascript

tailwind-css

alpine.js