Итак, Вы Думаете, Что Сможете Создать Выпадающий Список? - Педро Дуарте - (Next.js Конференция 2021)

YOUTUBE · 28.11.2025 08:12

Ключевые темы и таймкоды

Сложности создания выпадающего списка

0:04

Педро Дуарте, инженер по DX в Modules, рассказывает о сложности создания выпадающего списка, который должен быть доступным и не стилизованным.
Он приводит пример своего неудачного опыта создания выпадающего списка для демонстрации, который был сломан и не удовлетворял требованиям доступности.

Использование библиотеки Radix для создания выпадающих списков

5:32

Radix - это библиотека компонентов пользовательского интерфейса, которая фокусируется на создании доступных и не стилизованных компонентов для Интернета.
Radix включает в себя множество компонентов, включая выпадающее меню, и предоставляет API для их использования.
Педро демонстрирует, как использовать Radix для создания выпадающего меню, которое работает из коробки и полностью доступно.

Стилизация выпадающего меню с помощью Radix

10:11

Педро показывает, как стилизовать выпадающее меню с помощью ванильного CSS, применяя стили к элементам основы Radix.
Он также демонстрирует, как добавить дополнительные стили, такие как тени, отступы и цвета, чтобы сделать выпадающее меню более привлекательным.

Обзор выпадающего меню Radix

12:39

Создание выпадающего меню с использованием разметки и CSS.
Навигация с клавиатуры и использование type ahead для быстрого перехода к элементам.

Позиционирование с учетом столкновений

18:14

Меню перемещается в зависимости от наличия места под кнопкой и по бокам.
Подменю также перемещается в зависимости от направления чтения.

Анимация выпадающего меню

20:55

Использование CSS-анимации для анимации меню вверх и вниз.
Анимация с учетом происхождения для масштабирования меню на основе вычисленного происхождения.

Проблема с повторным изобретением велосипеда

24:57

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

Делегирование полномочий

25:32

Делегирование полномочий другим разработчикам может помочь сделать продукт более функциональным, доступным и освободить время для работы над уникальными характеристиками.
Для получения дополнительной информации о Radix UI можно посетить их сайт и подписаться на их Twitter.