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 の使用を開始するには、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 は、Web デザインの美学や使用しているテクノロジーについていかなる仮定も行いません。レンダリングは完全にユーザー次第であり、DOM に書き込まれるすべてのノードはカスタマイズできます。統合を容易にするために、簡単にカスタマイズ可能な CSS クラスによってスタイル設定された適切なデフォルトが提供されています。
アクセシビリティ対応
ツリー構造は、アクセス可能なツリーに関する W3C の仕様に準拠しています。スクリーン リーダーをサポートし、一般的なキーボード操作をすべて実装しているため、フォーカスの移動から項目のドラッグまで、マウスを使用せずにあらゆる操作が可能です。
強力なドラッグ アンド ドロップ
このツリーは、パワー ユーザーが高度なツールに期待する機能を提供します。必要な数の項目を選択し、同じツリーまたは他のツリー内の任意の場所にドラッグします。 React Complex Tree には、並べ替えを禁止したり、特定の項目のみでドラッグ アンド ドロップを有効にしたりするなど、ドラッグ アンド ドロップ用の多くのカスタマイズ オプションが付属しています。
フルキーボードコントロール
ツリーはキーボードで完全に制御できます。これは、ツリーにアクセスできるようにするために W3C によって提案されたすべてのコントロールを実装し、ドラッグ アンド ドロップ、項目の検索または名前変更のためのさらなるコントロールを提供します。
依存関係ゼロ
パッケージを追加して、最終的に何百ものピア依存関係が発生することがどれほど面倒であるかを私たちは知っています。 React Complex Tree は依存関係をまったく想定しないため、プロジェクトを追加のパッケージで混乱させる必要もありません。 React Complex Tree をパッケージに追加するときは、React Complex Tree のみを追加し、他の依存関係は追加しません。
複数選択
他のより単純なツリー ライブラリとは異なり、React Complex Tree では、必要な数の項目を選択し、別の場所にドラッグすることでそれらを一度に移動できます。追加の努力なしで強力なツリー機能を提供できるのに、なぜユーザーに提供する機能が少ないのでしょうか?上記のデモで試してみて、キーボードの Ctrl を押しながら項目をクリックし、一度に複数の項目を選択し、すべてを一度に別の場所にドラッグします。
組み込みの名前を変更する
React Complex Tree は、その機能を使用してネイティブ機能として名前変更を提供します。項目の名前変更を開始するには、任意の項目を選択して F2 を押します。これにより、ユーザーのワークフローをさらに混乱させるカスタム ダイアログ ソリューションを実装することなく、アイテムの名前を変更するためのより直感的な方法がユーザーに提供されます。
検索機能
巨大な混沌としたファイル ツリーの中で、存在することはわかっているものの、どこにあるのかわからない 1 つのファイルを見つけようとしたことはありますか?ツリーにフォーカスを当てて入力を開始すると、検索に一致する最初の項目が表示されます。これにより、キーボードのみのユーザーがツリー構造をより簡単にナビゲートできるようになるため、ツリーへのアクセシビリティも向上します。
マルチツリー環境
共通の状態を共有し、相互に対話できる複数のツリーを Web アプリで使用できます。状態とツリー項目は共通の React プロバイダー コンポーネントに提供され、プロバイダーの下にツリー コンポーネントを追加するだけで、必要な数のツリーを簡単に統合できます。ツリーは独自の状態を提供する必要はありません。必要なのは ID とそのルート項目だけであり、他のすべてのロジックはプロバイダーによって処理されます。
制御されたインターフェースと制御されていないインターフェース
React Complex Tree を使用する最も簡単な方法は、ツリーの状態 (つまり、どの項目が選択され、展開されているかなど) 自体を維持する、制御されていないツリー環境を使用することです。項目を非同期でロードする方法を定義するデータ プロバイダーを指定するだけで済み、残りの作業は環境が行います。ただし、より詳細な制御が必要な場合は、代わりに、完全にカスタマイズ可能な制御された環境を使用できます。
React と TypeScript を活用
React Complex Tree は React を利用しており (当たり前ですが)、提供されたコンポーネントをインポートして使用するだけで既存の React プロジェクトに簡単に統合できます。包括的な型情報は TypeScript インターフェイスとして提供され、プロジェクトで TypeScript を使用するかどうかに関係なく、統合が容易になり、追加の型安全性が提供されます。
RCT をローカルで開発する場合は、次のヒントを参照してください。
yarnを実行して依存関係をインストールするyarn buildローカルで 1 回実行します。yarn startを実行します。ストーリーブックを実行するには、 yarn storybookを実行します。
