Dialog Fields

§Descripción breve

El propósito del DFDialog componente es facilitar la creación de formularios, se usa internamente en forma final de reacción. Admite varios tipos de campos predefinidos, pero el usuario puede ampliarlo registrando otros nuevos mediante el uso de registerDialogControl.

§Controles

• Controles básicos
  • plain- texto estático
  • text- texto editable
  • multi-text- matriz de cadenas definida por el usuario
  • checkbox- casilla de verificación
  • tumbler- vaso
  • radio- botón de radio
  • editable-list- lista de cadenas extraíbles
  • multi-editable-list- lista múltiple de cadenas extraíbles
  • text area- área de texto
  • select- seleccionar
  • block- permite añadir ReactNode
• Registro de control personalizado

§Características

• Vista modal e in situ
• Una pestaña y varios formularios de pestañas
• Pestañas verticales/horizontales
• Campos y pestañas ocultos
• Campos enlazados por valores
• Validación a nivel de campo
• Validación a nivel de formulario
• Pestañas virtualizadas
• Pestañas que se pueden clonar
• Campos agrupados

§Instalar

$ npm install @gravity-ui/dialog-fields
# Use required version of react/react-dom in case you haven't installed them yet
$ npm install @gravity-ui/dialog-fields react@18 react-dom@18

En función de su gestor de paquetes, es posible que deba realizar la instalación peerDependencies manualmente.

§Uso

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

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

function MyForm() {
  return (
    <DFDialog<FormValues>
      visible={true}
      headerProps={{
        title: 'My form',
      }}
      onAdd={(form) => {
        console.log(form.getState().values);
        return Promise.resolve();
      }}
      fields={[
        {
          name: 'firstName',
          type: 'text',
          caption: 'First name',
          tooltip: 'Description for first name field',
        },
        {
          name: 'lastName',
          type: 'text',
          caption: 'LastName',
          tooltip: 'Description for last name field',
        },
      ]}
    />
  );
}

Vea más ejemplos en el libro de cuentos.