• Français

      • Composants partagés

      NocoBase client v2 intègre un ensemble de composants partagés. Pour créer des pages de plugin, des pages de configuration ou des formulaires, tu peux les utiliser directement et réutiliser l’UI ainsi que les interactions préparées par NocoBase.

      Cette section organise les composants par scénario d’utilisation. Chaque page décrit un seul composant : quand l’utiliser, son API courante et s’il peut être prévisualisé dans la documentation.

      Index rapide

      Je veux...Où consulter
      Contrôler le scanner plein écran de bas niveauCodeScanner
      Placer un formulaire standard dans un dialogDialogFormLayout
      Placer un formulaire standard dans un drawerDrawerFormLayout
      Autoriser uniquement les variables d’environnement $envEnvVariableInput
      Saisir une taille de fichier et la stocker en octetsFileSizeInput
      Modifier une configuration JSON / JSON5JsonTextArea
      Saisir un mot de passe avec indicateur de robustessePasswordInput
      Charger les options d’un Select de façon asynchrone depuis une APIRemoteSelect
      Ajouter la prise en charge du scan à un champ de saisieScanInput
      Permettre à un champ d’accepter à la fois des constantes et des variablesTypedVariableInput
      Permettre à un champ sur une ligne d’accepter des variables comme {{ $env.X }} et {{ $user.name }}VariableInput
      Insérer des variables dans une configuration JSON / JSON5VariableJsonTextArea
      Permettre au texte multiligne d’accepter des variablesVariableTextArea
      Filtrer une Collection avec plusieurs conditionsCollectionFilter
      Intégrer un panneau de filtre de Collection dans une pageCollectionFilterPanel
      Personnaliser la ligne déplaçable d’une antd TableSortableRow
      Personnaliser la colonne de poignée de déplacement d’une TableSortHandle
      Afficher des listes, sélectionner des lignes et trier par glisser-déposer dans les pages de configurationTable
      Utiliser les icônes Ant Design ou enregistrer des icônes personnaliséesIcon
      Créer un registre interne pour les points d’extension du plugincreateFormRegistry

      Utilisation

      Importe les composants nécessaires dans un plugin client, puis utilise-les comme des composants React ordinaires :

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

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

      Conseils de choix

      Par défaut, React + Antd suffit. Consulte d’abord ces composants pour les scénarios fréquents des plugins NocoBase :

      • Ouvrir des formulaires dans un drawer ou un dialog sur les pages de configuration
      • Insérer des variables, éditer du JSON, saisir des tailles de fichiers ou scanner des codes dans les champs de formulaire
      • Utiliser des filtres de Collection ou le tri par glisser-déposer dans les listes
      • Utiliser l’entrée d’icônes unifiée de NocoBase

      Pour les champs, boutons et messages ordinaires, les composants Antd sont généralement plus clairs.

      Liens associés