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事件添加到 label 會給我帶來一些奇怪的雙擊行為。 添加@click.prevent修飾符解決了這個問題，但之后單選元素沒有收到點擊事件。 我的建議避免了這個問題，因為無線電輸入元素本身成為了信息的來源。