Часть 2. Добавьте стиль, чтобы он выглядел как меню — добавление Tailwind CSS и JSON.

В предыдущей статье меню не похоже на обычное меню. В этой статье мы добавим стиль и JSON, чтобы имитировать получение данных из базы данных для создания меню.

Во-первых, добавьте класс к пунктам меню:

<Menu.Items className="focus:outline-none absolute origin-top-left  w-56  divide-y divide-gray-100 rounded-md bg-white shadow-lg ">

Используйте ‹div className="p-1›, чтобы обернуть все ‹Menu.Item›.

<Menu.Items className=" absolute origin-top-left  w-56  divide-y divide-gray-100 rounded-md bg-white shadow-lg ">
<div className="p-1">
<Menu.Item>

Также замените ‹a› на ‹button›.

<Menu.Item>
{({ active }) => (
<button
className={`${active && 'bg-blue-500'}`}
href="/account-settings"
>
Account settings
</button>
)}

Добавьте к кнопке следующие классы, чтобы сделать ее округлой и полной ширины:

<Menu.Item>
{({ active }) => (
<button
className={`${active && 'bg-blue-500'} w-full rounded-md p-2`}
href="/account-settings"
>
Account settings
</button>
)}
</Menu.Item>

Создайте данные элементов, которые содержат имена элементов и отключенные свойства.

const items = [
{name:"account",disabled:false},
{name:"info",disabled:false},
{name:"signout",disabled:true},
{name:"register",disabled:false}]

Мы также добавляем классы в Menu.Items и Menu.Button.

import { Menu } from '@headlessui/react'
export default function MyDropdown() {
const items = [{name:"account",disabled:false},{name:"info",disabled:false},{name:"signout",disabled:true},{name:"register",disabled:false}]
return (
<Menu>
<Menu.Button>More</Menu.Button>
<Menu.Items className="focus:outline-none absolute  w-56  divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5">
{/* Use the `active` render prop to conditionally style the active item. */}
{items.map(item=>(
<Menu.Item disabled={item.disabled}>
{({ active }) => (
<button
className={`${active ? 'bg-blue-500 text-white' : ' text-black'
} w-full rounded-md px-2 py-2`}
href="/account-settings"
>
{item.name}
</button>
)}
</Menu.Item>
))}
</Menu.Items>
</Menu>
)
}

Перебирать предметы

Мы перебираем элементы и передаем item.disabled и item.name компоненту, чтобы он динамически генерировал элементы, некоторые элементы будут отключены на основе JSON.

import { Menu } from '@headlessui/react'
const MyDropdown = () => {
const items = [
{ name: "account", disabled: false },
{ name: "info", disabled: false },
{ name: "signout", disabled: true },
{ name: "register", disabled: false }]
return (
<Menu>
<Menu.Button>More</Menu.Button>
<Menu.Items className="focus:outline-none absolute origin-top-left  w-56  divide-y divide-gray-100 rounded-md bg-white shadow-lg ">
<div className="p-1">
{items.map(item=>(
<Menu.Item disabled={item.disabled}>
{({ active }) => (
<button
className={`${active && 'bg-blue-500'} w-full rounded-md p-2`}
href="/account-settings"
>
{item.name}
</button>
)}
</Menu.Item>
))}
</div>
</Menu.Items>
</Menu>
)
}
export default MyDropdown

Для отключенной кнопки элемент должен быть отключен для навигации с помощью клавиатуры и целей ARIA.

Если вам понравилась эта история, вам также может быть интересна подписка на Medium. Это всего 5 долларов в месяц (цена чашки кофе!), но это даст вам неограниченный доступ к историям, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!

Подпишитесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora и Telegram

Присоединяйтесь к партнерам, чтобы зарабатывать деньги:



Gumroad
Подать заявку на участие в программе очень просто. Заполните форму ниже и сообщите Ckmobile, как вы будете продвигать их…ckmobile.gumroad.com



Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.