Skip to content

Tradução da documentação do repositório react-beautiful-dnd *Em andamento*

Notifications You must be signed in to change notification settings

dudestein/react-beautiful-dnd-pt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

logo do react beautiful dnd

react-beautiful-dnd

Clique e arraste Lindo e acessível para listas com React

CircleCI branch npm

exemplo de aplicação

Brinque com este exemplo se você quiser!

Principais características

Comece a usar 👩‍🏫

Nós criamos um curso grátis no egghead.io🥚 para te ajudar a começar a usar o react-beautiful-dnd o mais rápido possível.

course-logo

Pacote atual de funcionalidades suportadas ✅

  • Listas verticais ↕
  • Listas horizontais ↔
  • Movimento entre listas (▤ ↔ ▤)
  • Combinar items
  • Suporte a Mouse 🐭, teclado 🎹♿️ e toque 👉📱(celulares, tablets e por aí vai)
  • Suporte a arraste múltiplo
  • Suporte incrível a leitores de tela ♿️ - Nós fornecemos de fábrica uma experiência incrível para leitores de tela em inglês📦. Nós também fornecemos personalização completa e suporte a internacionalização para aqueles que precisam deles 💖
  • Arraste condicional e solte condicional
  • Listas múltiplas e independentes em uma mesma página
  • Itens de tamanhos flexíveis - os items arrastáveis podem ter alturas diferentes (listas verticais) ou larguras (listas horizontais)
  • Adição/Remoção de itens durante o arraste
  • Compatível com a reordenação semântica de <table> - padrão de tabela
  • Rolagem Automática - automaticamente rola os elementos e a janela de acordo com a necessidade durante o arraste (mesmo com o teclado 🔥)
  • Alças de arraste personalizadas - Você pode arrastar pelo item inteiro, ou só por parte dele
  • Compatível com ReactDOM.createPortal - padrão de portais
  • 🌲 Suporte ao pacote de árvores @atlaskit/tree
  • Uma lista <Droppable /> pode ser um container rolável (sem um pai rolável) ou ser filho de um container rolável (que também não tenha um pai rolável)
  • Listas aninhadas independentes - uma lista pode ser filha de outra lista, mas você não pode arrastar da lista pai pra lista filha
  • Compatível com renderização no servidor (SSR) - veja resetServerContext()
  • Brinca bem com elementos interativos aninhados by default

Motivação 🤔

O react-beautiful-dnd existe para criar lindas listas de clique e arraste que qualquer um possa usar - até mesmo pessoas que não podem enxergar. Para um bom panorama da história e motivações para o projeto, você pode dar uma olhada nos seguintes recursos externos:

Não é para todos ✌️

Existem muitas bibliotecas por aí que permitem clique e arraste dentro do React. A mais notável delas é a maravilhosareact-dnd. Ela faz um trabalho incrível em fornecer um conjunto de elementos primitivos de clique e arraste que funcionam especialmente bem com a selvagenmente inconsistente funcionalidade de clique e arraste do html5. react-beautiful-dnd é uma abstração de alto nível construída especificamente para listas(vertical, horizontal, movimento entre listas, listas aninhadas, etc). Dentro desse conjunto de funcionalidades, o react-beautiful-dnd oferece uma poderosa, natural e linda experiência de clique e arraste. No entanto, ele não provê a gama de funcionalidades oferecida pelo react-dnd. Então o react-beautiful-dnd pode não ser para você, dependendo do seu caso.

Documentação 📖

About 👋

Sensores 🔉

Os jeitos que alguém controla um clique e arraste

API 🏋️‍

diagrama

Guias 🗺

Padrões 👷‍

Suporte 👩‍⚕️

Leia isso em outros idiomas 🌎

Autor ✍️

Alex Reardon @alexandereardon

Colaboradores 🤝

About

Tradução da documentação do repositório react-beautiful-dnd *Em andamento*

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published