В этой статье мы собираемся создать группу радио с безголовым интерфейсом, Next.js и TailwindCSS.
После того, как мы создали проект Next.js и установили tailwindCSS, устанавливаем headless UI.
npm install @headlessui/react
Перейдите в корневую папку и создайте папку «components».
В папке создайте MyRadioGroup.js.
Добавьте планы, просмотрите планы, параметры станут красными, когда они активны, и синими, когда они отмечены.
<div className="space-y-2"> {plans.map((plan) => ( <RadioGroup.Option key={plan.name} value={plan} className={({ active, checked }) => `${active ? 'bg-red-500 ring-2 ring-white ring-opacity-60 ring-offset-2 ring-offset-sky-300' : '' } ${checked ? 'bg-sky-900 bg-opacity-75 text-white' : 'bg-white' } relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none` } > <span >{plan.name}</span> </RadioGroup.Option> ))} </div>
полный код
import React, { useState } from 'react' import { RadioGroup } from '@headlessui/react' const plans = [ { name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '160 GB SSD disk', }, { name: 'Business', ram: '16GB', cpus: '8 CPUs', disk: '512 GB SSD disk', }, { name: 'Enterprise', ram: '32GB', cpus: '12 CPUs', disk: '1024 GB SSD disk', }, ] const MyRadioGroup = () => { let [plan, setPlan] = useState('startup') return ( <div className="w-full px-4 py-16"> <div className="mx-auto w-full max-w-md"> <RadioGroup value={plan} onChange={setPlan}> <RadioGroup.Label>Plan</RadioGroup.Label> <div className="space-y-2"> {plans.map((plan) => ( <RadioGroup.Option key={plan.name} value={plan} className={({ active, checked }) => `${active ? 'bg-red-500 ring-2 ring-white ring-opacity-60 ring-offset-2 ring-offset-sky-300' : '' } ${checked ? 'bg-sky-900 bg-opacity-75 text-white' : 'bg-white' } relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none` } > <span >{plan.name}</span> </RadioGroup.Option> ))} </div> </RadioGroup> </div> </div> ) } export default MyRadioGroup
Если вам понравилась эта история, вам также может понравиться подписка на Medium. Это всего 5 долларов в месяц (цена чашки кофе!), но это даст вам неограниченный доступ к историям, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!
Подпишитесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.