點燈坊

失くすものさえない今が強くなるチャンスよ

實作 RadioGroup

Sam Xiao's Avatar 2021-04-02

RadioGroup 必須點到 圓框 才能選取，實務上會想要點擊 Label 也相當於選擇 Radio，可將 <input> 與 <label> 合作達成。

Version

Tailwind CSS 2.0.3

RadioGroup

radio000

當 cursor 指向 label 時也會出現 pointer，表示點下 label 亦能點選 radio。

<template>
  <label class="m-2 cursor-pointer">
    <input type="radio" class="h-4 w-4 text-indigo-600 border-gray-300 cursor-pointer m-1 focus:ring-indigo-500" name="domain" checked>
    Public
  </label>
  <label class="cursor-pointer">
    <input type="radio" class="h-4 w-4 text-indigo-600 border-gray-300 cursor-pointer m-1 focus:ring-indigo-500" name="domain">
    Private
  </label>
</template>

第 2 行

<label class="cursor-pointer"><input type="radio" name="domain" checked>Public</label>

將 <input> 包在 <label> 內，如此當點下 <label> 時相當於選擇 radio

第 3 行

<input type="radio" class="h-4 w-4 text-indigo-600 border-gray-300 cursor-pointer m-1 focus:ring-indigo-500" name="domain" checked>

設定 radio style：

  • h-4、w-4：設定 radio 的長寬
  • text-indigo-600：設定文字顏色
  • border-gray-300：設定 border 顏色
  • cursor-pointer：設定 cursor 為 pointer
  • m-1：設定 margin
  • focus:ring-indigo-500：設定 focus 時 ring 顏色

@tailwindcss/form Plugin

$ yarn add --dev @tailwindcss/forms

CheckBox 需搭配 @tailwindcss/forms plugin，使用 Yarn 安裝。

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

10 行

plugins: [
  require('@tailwindcss/forms'),
]

設定使用 @tailwindcss/forms plugin。

Conclusion

  • RadioGroup 需搭配 @tailwindcss/forms plugin，如此可減少 utility 使用量

Reference

Tailwind CSS, Pointer

# TailwindCSS