@abenfield/react-beautiful-dnd 中文文档教程

发布于 3年前 浏览 59 项目主页 更新于 3年前

⚠️ Maintenance & support

这个库继续被 Atlassian 产品严重依赖,但我们现在专注于其他优先事项,目前没有进一步开发或改进功能的计划。

它将继续在 GitHub 上,我们仍将根据需要进行重要更新(例如安全修复,如果有的话),但不会主动监控或回复问题和拉取请求。

我们建议您不要提出问题或拉取请求,因为在另行通知之前,它们不会被审查或采取行动。


反应漂亮的 dnd 标志

react-beautiful-dnd (rbd)

**Beautiful** and **accessible** drag and drop for lists with [`React`](https://facebook.github.io/react/) [![CircleCI branch](https://img.shields.io/circleci/project/github/atlassian/react-beautiful-dnd/master.svg)](https://circleci.com/gh/atlassian/react-beautiful-dnd/tree/master) [![npm](https://img.shields.io/npm/v/react-beautiful-dnd.svg)](https://www.npmjs.com/package/react-beautiful-dnd) ![quote application example](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif) [Play with this example if you want!](https://react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&selectedStory=simple)

Core characteristics

  • Beautiful and natural movement of items ????
  • Accessible: powerful keyboard and screen reader support ♿️
  • Extremely performant ????
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started ????‍????

我们在 egghead.io< 上创建了免费课程/code> ???? 帮助您尽快开始使用 react-beautiful-dnd

course-logo

Currently supported feature set ✅

  • Vertical lists ↕
  • Horizontal lists ↔
  • Movement between lists (▤ ↔ ▤)
  • Virtual list support ???? - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse ????, keyboard ????♿️ and touch ????(mobile, tablet and so on) support
  • Multi drag support
  • Incredible screen reader support ♿️ - we provide an amazing experience for english screen readers out of the box ????. We also provide complete customisation control and internationalisation support for those who need it ????
  • Conditional dragging and conditional dropping
  • Multiple independent lists on the one page
  • Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
  • Add and remove items during a drag
  • Compatible with semantic <table> reordering - table pattern
  • Auto scrolling - automatically scroll containers and the window as required during a drag (even with keyboard ????)
  • Custom drag handles - you can drag a whole item by just a part of it
  • Able to move the dragging item to another element while dragging (clone, portal) - Reparenting your <Draggable />
  • Create scripted drag and drop experiences ????
  • Allows extensions to support for any input type you like ????
  • Tree support through the @atlaskit/tree package
  • A <Droppable /> list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
  • Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
  • Server side rendering (SSR) compatible - see resetServerContext()
  • Plays well with nested interactive elements by default

Motivation ????

react-beautiful-dnd 存在以创建漂亮的拖放任何人都可以使用的列表 - 即使是看不见的人。 为了更好地了解项目的历史和动机,您可以查看这些外部资源:

Not for everyone ✌️

有很多库允许在 React 中进行拖放交互。 其中最值得注意的是令人惊叹的 react-dnd。 它在提供一组出色的拖放原语方面做得非常出色,这些原语与 wildly 配合得特别好不一致 html5 拖放功能。 react-beautiful-dnd 是专门为列表构建的更高级别的抽象(垂直、水平、列表之间的移动、嵌套列表等)。 在该功能子集中,react-beautiful-dnd 提供了强大、自然和美观的拖放体验。 但是,它不提供 react-dnd 所提供的广泛功能。 所以 react-beautiful-dnd 可能不适合你,这取决于你的用例。

Documentation ????

About ????

Sensors ????

有人可以开始和控制拖动的方式

API ????️‍

diagram

Guides ????

Patterns ????‍

Support ????‍⚕️

Read this in other languages ????

Creator ✍️

Alex Reardon @alexandereardon

Alex 不再亲自维护这个项目。 其他优秀的维护者正在推进这个项目。

Maintainers

Collaborators ????

⚠️ Maintenance & support

This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements.

It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests.

We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.


react beautiful dnd logo

react-beautiful-dnd (rbd)

**Beautiful** and **accessible** drag and drop for lists with [`React`](https://facebook.github.io/react/) [![CircleCI branch](https://img.shields.io/circleci/project/github/atlassian/react-beautiful-dnd/master.svg)](https://circleci.com/gh/atlassian/react-beautiful-dnd/tree/master) [![npm](https://img.shields.io/npm/v/react-beautiful-dnd.svg)](https://www.npmjs.com/package/react-beautiful-dnd) ![quote application example](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif) [Play with this example if you want!](https://react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&selectedStory=simple)

Core characteristics

  • Beautiful and natural movement of items ????
  • Accessible: powerful keyboard and screen reader support ♿️
  • Extremely performant ????
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started ????‍????

We have created a free course on egghead.io ???? to help you get started with react-beautiful-dnd as quickly as possible.

course-logo

Currently supported feature set ✅

  • Vertical lists ↕
  • Horizontal lists ↔
  • Movement between lists (▤ ↔ ▤)
  • Virtual list support ???? - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse ????, keyboard ????♿️ and touch ???????? (mobile, tablet and so on) support
  • Multi drag support
  • Incredible screen reader support ♿️ - we provide an amazing experience for english screen readers out of the box ????. We also provide complete customisation control and internationalisation support for those who need it ????
  • Conditional dragging and conditional dropping
  • Multiple independent lists on the one page
  • Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
  • Add and remove items during a drag
  • Compatible with semantic <table> reordering - table pattern
  • Auto scrolling - automatically scroll containers and the window as required during a drag (even with keyboard ????)
  • Custom drag handles - you can drag a whole item by just a part of it
  • Able to move the dragging item to another element while dragging (clone, portal) - Reparenting your <Draggable />
  • Create scripted drag and drop experiences ????
  • Allows extensions to support for any input type you like ????
  • ???? Tree support through the @atlaskit/tree package
  • A <Droppable /> list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
  • Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
  • Server side rendering (SSR) compatible - see resetServerContext()
  • Plays well with nested interactive elements by default

Motivation ????

react-beautiful-dnd exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:

Not for everyone ✌️

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So react-beautiful-dnd might not be for you depending on what your use case is.

Documentation ????

About ????

Sensors ????

The ways in which somebody can start and control a drag

API ????️‍

diagram

Guides ????

Patterns ????‍

Support ????‍⚕️

Read this in other languages ????

Creator ✍️

Alex Reardon @alexandereardon

Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.

Maintainers

Collaborators ????

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文