Часть 1: Базовый пример
В этой статье мы собираемся создать базовый пример Popover с использованием безголового пользовательского интерфейса.
После создания проекта и установки TailwindCSS установите безголовый пользовательский интерфейс.
Создать всплывающий компонент
В корневой папке создайте папку компонентов, затем создайте MyPopover.js. Мы добавляем класс во внешний div, кнопку Popover, а также содержимое панели.
import React from 'react'
import { Popover } from '@headlessui/react'
const MyPopover = () => {
return (
<div className="fixed top-16 w-full max-w-sm px-4">
<Popover className="relative">
<Popover.Button
className="group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium text-white hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>Solutions</Popover.Button>
<Popover.Panel className="absolute z-10 mt-3">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-8 bg-white p-7 ">
<a href="/analytics">Analytics</a>
<a href="/engagement">Engagement</a>
<a href="/security">Security</a>
<a href="/integrations">Integrations</a>
</div>
</div>
</Popover.Panel>
</Popover>
</div>
)
}
export default MyPopover
Под index.js импортируйте компонент MyPopover, добавьте цвет фона и сделайте так, чтобы ‹div› охватывал всю высоту области просмотра.
import MyPopover from '../components/MyPopover'
export default function Home() {
return (
<div className="bg-orange-200 h-screen">
<MyPopover/>
</div>
)
}
Если вам понравилась эта история, вам также может понравиться подписка на Medium. Это всего 5 долларов в месяц (цена чашки кофе!), но это даст вам неограниченный доступ к историям, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
