floating ui

Вы можете поддерживать плавающий пользовательский интерфейс различными способами на открытом коллективе.

Почему

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

Абсолютное позиционирование также может вызвать проблемы, когда плавающий элемент находится слишком близко к краю видового порта и становится скрытым, также известным как столкновение. Когда происходит столкновение, положение должно быть отрегулировано, чтобы убедиться, что плавающий элемент остается видимым.

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

Ploating UI предлагает набор низкоуровневых функций, которые помогут вам ориентироваться в этих проблемах и создать доступные компоненты плавающего пользовательского интерфейса.

Установить

Чтобы установить плавающий пользовательский интерфейс, вы можете использовать диспетчер пакетов, такой как NPM или CDN. Существуют разные версии для разных платформ.

Ваниль

Используйте в Интернете с ванильным JavaScript.

npm install @floating-ui/dom

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

Реагировать

Используйте с React DOM или React Native.

React Dom

 # Positioning + interactions
npm install @floating-ui/react

# Positioning only (smaller size)
npm install @floating-ui/react-dom

Реагировать на родной

npm install @floating-ui/react-native

Vue

Использовать с VUE.

npm install @floating-ui/vue

Холст или другие платформы

Если вы нацелены на платформу, отличную от ванильного DOM (Web), React или React Native, вы можете создать свою собственную платформу. Это позволяет вам поддерживать такие вещи, как Canvas/WebGL или другие платформы, которые могут запускать JavaScript.

npm install @floating-ui/core

Внося

Этот проект представляет собой монорепо, написанное в TypeScript с использованием рабочих пространств PNPM. Веб -сайт использует Next.js SSG и Tailwind CSS для стиля.

• Вилка и клонировать репо
• Установить зависимости в корневом каталоге с pnpm install
• Создайте начальный пакет файлов Dist с помощью pnpm run build

Тестирование

Дом

pnpm run --filter @floating-ui/dom dev в корне запустит визуальные тесты разработки @floating-ui/dom по адресу http://localhost:1234 . Игровая площадка использует React, чтобы написать каждый тестовый маршрут, в комплекте с Vite.

У каждого маршрута есть скриншоты, сделанные на странице по Plawwright, чтобы гарантировать, что все функции работают, как и ожидалось; Это простой, надежный и высокий способ тестирования логики позиционирования.

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

Реагировать

pnpm run --filter @floating-ui/react dev в корне запустит тесты на разработку @floating-ui/react по адресу http://localhost:1234 .

Кредиты

Плавающие формы на изображении баннера сделаны удивительными артистами @artstar3d, @killnicole и @liiiiiii на Figma - посмотрите их работу!

Лицензия

Грань