floating ui

Você pode apoiar a interface do usuário flutuante de várias maneiras no coletivo aberto.

Por que

Os elementos flutuantes estão absolutamente posicionados, normalmente ancorados em outro elemento da interface do usuário. Garantir que um elemento flutuante permaneça ancorado ao lado de outro elemento pode ser um desafio, especialmente em contextos exclusivos de layout, como rolando recipientes.

O posicionamento absoluto também pode causar problemas quando o elemento flutuante está muito próximo da borda da viewport e fica obscurecido, também conhecido como colisão. Quando ocorre uma colisão, a posição deve ser ajustada para garantir que o elemento flutuante permaneça visível.

Além disso, os elementos flutuantes geralmente são interativos, o que pode levantar problemas complexos de acessibilidade ao projetar interações do usuário.

A interface do usuário flutuante oferece um conjunto de recursos de baixo nível para ajudá-lo a navegar nesses desafios e criar componentes de interface do usuário flutuante acessíveis.

Instalar

Para instalar a interface do usuário flutuante, você pode usar um gerenciador de pacotes como o NPM ou um CDN. Existem diferentes versões disponíveis para diferentes plataformas.

Baunilha

Use na web com JavaScript de baunilha.

npm install @floating-ui/dom

Você pode começar lendo o tutorial, que ensina como usar a biblioteca criando uma dica de ferramenta básica ou pode pular diretamente na documentação da API.

Reagir

Use com react dom ou react nativo.

Reaja dom

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

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

Reagir nativo

npm install @floating-ui/react-native

Vue

Use com Vue.

npm install @floating-ui/vue

Tela ou outras plataformas

Se você estiver segmentando uma plataforma que não seja a Vanilla DOM (Web), reaja ou reaja nativa, poderá criar sua própria plataforma. Isso permite suportar coisas como tela/webgl ou outras plataformas que podem executar o JavaScript.

npm install @floating-ui/core

Contribuindo

Este projeto é um monorepo escrito no TypeScript usando os espaços de trabalho do PNPM. O site está usando o Next.JS SSG e o Tailwind CSS para estilo.

• Garfo e clonar o repositório
• Instale dependências no diretório raiz com pnpm install
• Crie arquivos distintos de pacote inicial com pnpm run build

Terrenos de teste

Dom

pnpm run --filter @floating-ui/dom dev na raiz lançará os testes visuais de desenvolvimento @floating-ui/dom em http://localhost:1234 . O playground usa o React para escrever cada rota de teste, agrupada por Vite.

Cada rota tem capturas de tela tiradas da página por dramaturgo para garantir que todas as funcionalidades funcionem conforme o esperado; Essa é uma maneira fácil, confiável e de alto nível de testar a lógica de posicionamento.

Abaixo do contêiner principal, estão os controles da interface do usuário para ativar determinados estados e opções. Cada combinação de estado é testada visualmente através dos instantâneos para cobrir o máximo possível.

Reagir

pnpm run --filter @floating-ui/react dev na raiz lançará os testes de desenvolvimento @floating-ui/react em http://localhost:1234 .

Créditos

As formas flutuantes da imagem do banner são feitas pelos incríveis artistas @artstar3d, @killnicole e @liiiiiiii na figma - confira o trabalho deles!

Licença

Mit