• Deutsch

      • Gemeinsame Komponenten

      NocoBase client v2 enthält eine Reihe gemeinsamer Komponenten. Beim Entwickeln von Plugin-Seiten, Einstellungsseiten oder Formularen kannst du diese Komponenten direkt verwenden und die vorbereitete UI sowie Interaktionen von NocoBase wiederverwenden.

      Dieser Bereich gruppiert Komponenten nach Einsatzszenarien. Jede Seite beschreibt eine Komponente: wofür sie geeignet ist, die häufig verwendete API und ob sie direkt in der Dokumentation angezeigt werden kann.

      Schnellindex

      Ich möchte ...Siehe
      Den niedrigstufigen Vollbild-Scanner steuernCodeScanner
      Ein Standardformular in einem Dialog platzierenDialogFormLayout
      Ein Standardformular in einem Drawer platzierenDrawerFormLayout
      Nur $env-Umgebungsvariablen erlaubenEnvVariableInput
      Eine Dateigröße eingeben und als Bytes speichernFileSizeInput
      JSON- / JSON5-Konfiguration bearbeitenJsonTextArea
      Ein Passwort mit Stärkeanzeige eingebenPasswordInput
      Select-Optionen asynchron über eine API ladenRemoteSelect
      Ein Eingabefeld um Scan-Unterstützung erweiternScanInput
      Einem Feld Konstanten und Variablen zugleich erlaubenTypedVariableInput
      Einzeilige Felder Variablen wie {{ $env.X }} und {{ $user.name }} akzeptieren lassenVariableInput
      Variablen in JSON- / JSON5-Konfiguration einfügenVariableJsonTextArea
      Mehrzeiligen Text Variablen akzeptieren lassenVariableTextArea
      Eine Collection mit mehreren Bedingungen filternCollectionFilter
      Ein Collection-Filterpanel in eine Seite einbettenCollectionFilterPanel
      Die ziehbare Zeile einer antd Table anpassenSortableRow
      Die Drag-Handle-Spalte einer Table anpassenSortHandle
      Listen anzeigen, Zeilen auswählen und auf Einstellungsseiten per Drag sortierenTable
      Ant Design Icons verwenden oder eigene Icons registrierenIcon
      Eine interne Registry für Plugin-Erweiterungen erstellencreateFormRegistry

      Verwendung

      Importiere die benötigten Komponenten in einem Client-Plugin und verwende sie wie normale React-Komponenten:

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

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

      Auswahlhinweise

      Standardmäßig reichen React + Antd aus. Prüfe diese Komponenten zuerst bei typischen NocoBase-Plugin-Szenarien:

      • Drawer- oder Dialog-Formulare auf Einstellungsseiten öffnen
      • Variablen einfügen, JSON bearbeiten, Dateigrößen eingeben oder Codes in Formularfeldern scannen
      • Collection-Filter oder Drag-Sortierung in Listen verwenden
      • Den einheitlichen Icon-Einstieg von NocoBase verwenden

      Für einfache Eingaben, Buttons und Hinweise sind Antd-Komponenten meist klarer.