#共通コンポーネント

NocoBase client v2 には共通コンポーネントが組み込まれています。プラグインページ、設定ページ、フォームを作るときに直接利用でき、NocoBase が用意している UI と操作を再利用できます。

このセクションでは、利用シーンごとにコンポーネントを整理しています。各ページでは 1 つのコンポーネントだけを扱い、適した場面、よく使う API、ドキュメント内でプレビューできるかを説明します。

#クイックインデックス

#使用方法

クライアントプラグインで必要なコンポーネントをインポートし、通常の React コンポーネントと同じように使います：

import { RemoteSelect, Table } from '@nocobase/client-v2';

function SettingsPage() {
  return (
    <>
      <RemoteSelect request={loadOptions} />
      <Table rowKey="id" columns={columns} dataSource={records} />
    </>
  );
}

#使い分け

基本は React + Antd で十分です。NocoBase プラグインで次のような場面に出会ったら、まずこれらのコンポーネントを確認してください：

• 設定ページで drawer / dialog フォームを開く
• フォームフィールドで変数の挿入、JSON 編集、ファイルサイズ入力、コードスキャンを行う
• 一覧ページで Collection フィルターやドラッグソートを使う
• NocoBase の統一アイコン入口を使う

通常の入力欄、ボタン、メッセージであれば、Antd コンポーネントを直接使う方が分かりやすいです。

#関連リンク

• Component コンポーネント開発
• Context → よく使う機能
• FlowEngine