/react-beautiful-dnd-ru

react-beautiful-dnd's Russian document. *in progress*

react beautiful dnd logo

react-beautiful-dnd

Красивый и доступный drag and drop разработанный с помощью библиотеки React

CircleCI branch npm

quote application example

Если есть желание - поиграйте с примерами!!

Основные характеристики

Начало работы 👩‍🏫

Мы создали бесплатный курс на egghead.io 🥚 чтобы помочь вам начать работу с react-beautiful-dnd как можно быстрее.

course-logo

Поддерживаемые функции на данный момент ✅

  • Вертикальные списки ↕
  • Горизонтальные списки ↔
  • Передвижение между списками (▤ ↔ ▤)
  • Объединение элементов
  • Поддержка мыши 🐭, клавиатуры 🎹♿️ и тач скрина 👉📱 (на мобильном, планшетном и других устройствах)
  • Поддержка multi grag
  • Невероятная поддержка программ экранного доступа ♿️ - мы предлагаем удивительный опыт для английских программ экрамного доступа прямо из коробки 📦. Мы также предоставляем полный контроль настройки и поддержку интернационализации для тех, кто в ней нуждается 💖
  • Перетаскивание по условию и сброс по условию
  • Несколько независимых списков на одной странице
  • Гибкие размеры элементов списка - двигаемые элементы могут иметь разную высоту (вертикальные списки) и ширину (горизонтальные списки)
  • Возможность добавлять и удалять элементы во время движения
  • Совместимость с семантическим упорядочиванием <table> - табличный паттерн
  • Авто скроллинг - возможность автоматически скроллить контейнер и даже окно, если необходимо (даже с помощью клавиатуры 🔥)
  • Кастомное управление передвижением - возможность передвигать целый элемент, управляя лишь его частью
  • Совместимость с ReactDOM.createPortal - паттерн порталов
  • 🌲 Поддержка дерева с помощью пакета @atlaskit/tree
  • <Droppable /> список может быть контейнером с прокруткой (без прокручиваемого родителя) или быть дочерним по отношению к контейнеру с прокруткой (у которого также нет прокручиваемого родителя)
  • Независимые вложенные списки - список может быть дочерним по отношению к другому списку, но вы не можете перетаскивать элементы из родительского списка в дочерний список
  • Поддержка рендеринг на стороне сервера (Server side rendering (SSR)) - смотрите resetServerContext()
  • Прекрасно работает с вложенными интерактивными элементами по-умолчанию

Мотивация 🤔

react-beautiful-dnd разработан для создания красивых перетаскиваний элементов списка/списков. Их может использовать любой, даже люди, у которых проблемы со зрением. Для получения большей информации и мотивации по использованию проекта вы можете взглянуть на внешние ресурсы:

Не для всех ✌️

Существует огромное количество библиотек, которые позволяют реализовать перетаскивание (drag and drop) с помощью React. Наиболее примечательным является удивительный react-dnd. React-dnd выполняет невероятную работу по предоставлению большого набора примитивов перетаскивания, которые хорошо совместимы и хорошо работают с дико несовместимой функцией перетаскивания в html5. react-beautiful-dnd - это абстракция более высокого уровня специально созданная для списков (вертикальных, горизонтальных, передвижения между списков, вложенных списков и так далее). В рамках вышеприведенного подмножества, react-beatiful-dnd предлагает мощное, естественное и красивое перетаскивание drag and drop. Тем не менее, эта библиотека не обеспечивает широту функциональных возможностей, предлагаемых react-dnd. Таким образом react-beatiful-dnd может вам не подойти - все зависит от ваших целей его использования.

Документация 📖

Описание 👋

Сенсоры 🔉

Способы, с помощью которых можно использовать drag and drop

API 🏋️‍

диаграмма

  • <DragDropContext /> - Оборачивает ту часть вашего приложения, где вы хотите применить drag and drop
  • <Droppable /> - Область в которую необходимо реализовать перетаскивание. Содержит<Draggable />
  • <Draggable /> - То, что будете двигать и переносить
  • resetServerContext() - Утилита для серверного рендеринга (SSR)

Руководства 🗺

Паттерны 👷‍

Поддержка 👩‍⚕️

Читать документацию на других языках 🌎

Автор ✍️

Alex Reardon @alexandereardon

Контрибьюторы 🤝