Dialog Fields

<div class="language-selector">
  <a href="/en/README.md">English</a>
  <a href="/de/README.md" class="active">Deutsch</a>
</div>

§Kurzbeschreibung

Die DFDialog-Komponente erleichtert die Erstellung von Formularen und verwendet intern react-final-form. Sie unterstützt mehrere vordefinierte Feldtypen, kann aber durch Registrierung neuer Typen mit registerDialogControl erweitert werden.

§Steuerelemente

• Basis-Steuerelemente
  • plain - statischer Text
  • text - editierbarer Text
  • multi-text - vom Benutzer definierte Zeichenketten-Array
  • checkbox - Kontrollkästchen
  • tumbler - Kippschalter
  • radio - Optionsfeld
  • editable-list - Liste von entfernbaren Zeichenketten
  • multi-editable-list - Mehrfachliste von entfernbaren Zeichenketten
  • text area - Textbereich
  • select - Auswahlfeld
  • block - Ermöglicht das Hinzufügen von ReactNode
• Registrierung benutzerdefinierter Steuerelemente

§Funktionen

• In-Place- und Modalansicht
• Ein Tab und mehrere Tab-Formulare
• Vertikale/Horizontale Tabs
• Ausgeblendete Felder und Tabs
• Felder basierend auf Werten verknüpfen
• Feld-spezifische Validierung
• Formular-spezifische Validierung
• Virtualisierte Tabs
• Klonbare Tabs
• Gruppierte Felder

§Installation

$ npm install @gravity-ui/dialog-fields
# Verwenden Sie die erforderliche Version von react/react-dom, falls Sie diese noch nicht installiert haben
$ npm install @gravity-ui/dialog-fields react@18 react-dom@18

Abhängig von Ihrem Paketmanager müssen Sie möglicherweise peerDependencies manuell installieren.

§Verwendung

import {DFDialog, FormApi} from '@gravity-ui/dialog-fields';

interface FormValues {
  firstName: string;
  lastName: string;
}

function MyForm() {
  return (
    <DFDialog<FormValues>
      visible={true}
      headerProps={{
        title: 'Mein Formular',
      }}
      onAdd={(form) => {
        console.log(form.getState().values);
        return Promise.resolve();
      }}
      fields={[
        {
          name: 'firstName',
          type: 'text',
          caption: 'Vorname',
          tooltip: 'Beschreibung für das Feld Vorname',
        },
        {
          name: 'lastName',
          type: 'text',
          caption: 'Nachname',
          tooltip: 'Beschreibung für das Feld Nachname',
        },
      ]}
    />
  );
}

Weitere Beispiele finden Sie im Storybook.