顺风& 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修饰符解决了这个问题，但之后无线电元素没有接收到单击事件。我的建议避免了这个问题，因为无线电输入元素本身就是信息的来源。