react complex tree
2.4.6
다중 선택 및 드래그 앤 드롭 기능을 갖춘 무의식적으로 접근 가능한 트리 구성 요소
더 많은 예제와 더 포괄적인 문서를 보려면 공식 문서를 살펴보세요. FAQ 페이지에서는 많은 일반적인 문제나 질문을 다룹니다.
변경 로그는 https://rct.lukasbach.com/docs/changelog에서 확인할 수 있습니다. v1.x에서 v2.x로 마이그레이션할 때 v2 릴리스 노트를 확인하세요.
React-Complex-Tree의 개발은 커뮤니티에서 지원됩니다. 특별히 감사드립니다:
React-Complex-Tree 개발을 지원하는 방법을 알아보세요.
React Complex Tree 사용을 시작하려면 다음을 통해 프로젝트에 종속성으로 설치하세요.
npm install react-complex-tree
yarn add react-complex-tree
그런 다음 가져오고 트리 구조를 추가하십시오.
import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;
< UncontrolledTreeEnvironment
dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
getItemTitle = { item => item . data }
viewState = { { } }
>
< Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;자세한 내용은 시작하기 가이드를 참조하세요. 정적 트리 데이터 제공자와 데이터를 통합하는 방법에 대한 가이드는 React Complex Tree와 데이터를 통합하는 방법을 이해하기 위한 좋은 출발점이기도 합니다.
의견이 없는
React Complex Tree는 웹 디자인의 미적 측면이나 사용 중인 기술에 대해 어떠한 가정도 하지 않습니다. 렌더링은 전적으로 귀하에게 달려 있으며 DOM에 기록된 모든 노드를 사용자 정의할 수 있습니다. 쉽게 사용자 정의할 수 있는 CSS 클래스로 스타일링된 합리적인 기본값이 제공되어 통합이 용이합니다.
얻기 쉬운
트리 구조는 접근 가능한 트리에 대한 W3C 사양을 따릅니다. 스크린 리더를 지원하고 모든 일반적인 키보드 상호 작용을 구현하므로 마우스를 사용하지 않고도 포커스 이동부터 항목 드래그까지 모든 상호 작용이 가능합니다.
강력한 드래그 앤 드롭
트리는 고급 도구에서 고급 사용자가 기대하는 기능을 제공합니다. 원하는 만큼 항목을 선택하고 같은 트리나 다른 트리 내의 원하는 위치로 드래그하세요! React Complex Tree에는 재정렬을 허용하지 않거나 특정 항목에서만 드래그 또는 드롭을 활성화하는 등 드래그 앤 드롭에 대한 다양한 사용자 정의 옵션이 제공됩니다.
전체 키보드 컨트롤
트리는 키보드를 통해 완전히 제어할 수 있습니다. 트리에 액세스할 수 있도록 W3C에서 제안한 모든 컨트롤을 구현하고 드래그 앤 드롭, 항목 검색 또는 이름 바꾸기에 대한 추가 컨트롤을 제공합니다.
종속성 없음
우리는 패키지를 추가하고 수백 개의 피어 종속성이 발생하는 것이 얼마나 짜증나는 일인지 알고 있습니다. React Complex Tree는 종속성에 대해 어떤 가정도 하지 않기 때문에 추가 패키지로 프로젝트를 복잡하게 만들 필요도 없습니다. 패키지에 React Complex Tree를 추가할 때 해당 트리만 추가하고 다른 종속성은 추가하지 않습니다.
다중 선택
다른 단순한 트리 라이브러리 외에 React Complex Tree를 사용하면 원하는 만큼 많은 항목을 선택하고 다른 위치로 드래그하여 한 번에 이동할 수 있습니다. 추가 노력 없이 강력한 트리 기능을 제공할 수 있는데 왜 사용자에게 더 적은 기능을 제공합니까? 위의 데모에서 시도해 보고 항목을 클릭하는 동안 키보드의 컨트롤을 누른 다음 한 번에 다른 위치로 드래그하여 여러 항목을 한 번에 선택하세요.
내장 이름 바꾸기
React Complex Tree는 해당 기능과 함께 기본 기능으로 이름 바꾸기를 제공합니다. 항목을 선택하고 F2를 누르면 항목 이름 바꾸기가 시작됩니다. 이는 사용자의 작업 흐름을 더욱 방해하는 사용자 정의 대화 상자 솔루션을 구현하지 않고도 사용자의 항목 이름을 바꾸는 보다 직관적인 방법을 제공합니다.
검색 기능
거대하고 혼란스러운 파일 트리에서 거기 있다는 것을 알지만 어디에 있는지 모르는 파일 하나를 찾으려고 시도한 적이 있습니까? 트리에 초점을 맞추면서 입력을 시작하면 검색어와 일치하는 첫 번째 항목이 표시됩니다. 또한 키보드만 사용하는 사용자가 트리 구조를 더 쉽게 탐색할 수 있으므로 트리에 대한 접근성도 향상됩니다.
다중 트리 환경
웹앱에서 공통 상태를 공유하고 서로 상호 작용할 수 있는 여러 트리를 사용할 수 있습니다. 상태 및 트리 항목은 일반적인 반응 공급자 구성 요소에 제공되며 공급자 아래에 트리 구성 요소를 추가하기만 하면 원하는 만큼의 트리를 쉽게 통합할 수 있습니다. 트리는 자체 상태를 제공할 필요가 없으며 ID와 루트 항목만 필요하며 다른 모든 논리는 공급자가 처리합니다.
제어되는 인터페이스와 제어되지 않는 인터페이스
React Complex Tree를 사용하는 가장 쉬운 방법은 트리 상태, 즉 어떤 항목이 선택되고 확장되는지 등 자체를 유지하는 제어되지 않는 트리 환경을 사용하는 것입니다. 항목이 비동기적으로 로드되는 방식을 정의하는 데이터 공급자만 제공하면 환경이 나머지 작업을 수행합니다. 그러나 더 많은 제어를 원할 경우 전체 사용자 정의를 위해 제어된 환경을 대신 사용할 수 있습니다.
React와 TypeScript로 구동
React Complex Tree는 React(duh)에 의해 구동되며 제공된 구성 요소를 가져오고 사용하기만 하면 기존 React 프로젝트에 쉽게 통합됩니다. 포괄적인 유형 정보는 프로젝트에서 TypeScript를 사용하는지 여부에 관계없이 통합을 쉽게 하고 추가적인 유형 안전성을 제공하는 TypeScript 인터페이스로 제공됩니다.
RCT를 로컬에서 개발하려는 경우 다음 몇 가지 힌트를 참조하세요.
yarn 실행하여 종속 항목 설치yarn build 한 번 실행하세요.yarn start 실행하여 docusaurus 및 패키지를 watch 모드로 시작하거나 실 yarn storybook 실행하여 스토리북을 실행합니다.
