Часть 4: Переход
В этой части мы собираемся добавить переход в список.
Сначала нам нужно добавить переход от реакции безголового пользовательского интерфейса.
import { Listbox ,Transition } from '@headlessui/react'
Затем мы используем компонент ‹Transition›, чтобы обернуть ‹Listbox.Options›
Копируем компонент «Переход» из документации и вносим корректировку в масштаб
enterFrom="transform scale-125 opacity-0"
export default function MyListbox() {
const [open, setOpen] = useRecoilState(openState)
const [selectedPerson, setSelectedPerson] = useState([people[0], people[1]])
return (
<div className="fixed top-16 w-72 left-16">
<Listbox value={selectedPerson} onChange={setSelectedPerson} name="assignee" multiple horizontal>
<Listbox.Label>Assignee:</Listbox.Label>
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"> {selectedPerson.map((person) => person.name).join(',')}</Listbox.Button>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-125 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Listbox.Options className="absolute mt-1 max-h-60 flex flex-row rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{people.map((person) => (
<Listbox.Option
key={person.id}
value={person}
disabled={person.unavailable}
as={Fragment}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
}`
}
>
{({ active, selected }) => (
<li
className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'
}`}
>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null} {person.name}
</li>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</Listbox>
</div>
)
}
Если вам понравилась эта история, вам также может понравиться подписка на Medium. Это всего 5 долларов в месяц (цена чашки кофе!), но это даст вам неограниченный доступ к историям, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
