react complex tree下載 - react complex tree原始碼下載

react complex tree

其他源碼

2.4.6

下載

反應複雜樹

具有多選和拖放功能的無主見可存取樹組件

查看官方文件以查看更多範例和更全面的文件。常見問題頁面涵蓋了許多常見問題或疑問。

變更日誌可在 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，開始重新命名該項目。這為使用者提供了一種更直觀的重命名專案的方法，而無需實施對使用者工作流程造成更大干擾的自訂對話解決方案。
搜尋功能
您是否曾經嘗試過在一棵巨大的混亂文件樹中找到一個文件，您知道它在那裡，但不知道在哪裡？只需在聚焦樹的同時開始輸入，第一個與您的搜尋相符的項目就會顯示出來。這也提高了樹的可訪問性，因為僅使用鍵盤的使用者可以更輕鬆地導航樹結構。
多樹環境
您可以在 Web 應用程式上使用多個樹，它們共用一個公共狀態，並且能夠相互互動。狀態和樹項被提供給一個公共的 React 提供者元件，並且只需在提供者下方添加樹組件即可輕鬆整合任意數量的樹。樹不需要提供自己的狀態，它們只需要一個 ID 和它們的根項，所有其他邏輯都由提供者處理。
受控和非受控接口
使用 React Complex Tree 最簡單的方法是使用不受控制的樹環境來維護樹狀態，也就是哪些專案本身被選擇、展開等。您只需要提供一個資料提供者來定義如何非同步載入項目，其餘的工作由環境完成。但是，如果您想要更多控制，您可以使用受控環境進行完全可自訂。
由 React 和 TypeScript 提供支援
React Complex Tree 由 React (duh) 提供支持，只需匯入和使用提供的元件即可輕鬆整合到現有的 React 專案中。全面的類型資訊以 TypeScript 介面的形式提供，無論您是否在專案中使用 TypeScript，都可以簡化整合並提供額外的類型安全性。