В этой статье мы собираемся создать группу радио с безголовым интерфейсом, 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.