• Español

      • Componentes compartidos

      NocoBase client v2 incluye un conjunto de componentes compartidos. Al crear páginas de plugins, páginas de configuración o formularios, puedes usarlos directamente para reutilizar la UI y las interacciones ya preparadas por NocoBase.

      Esta sección organiza los componentes por escenario de uso. Cada página presenta un solo componente: cuándo usarlo, su API habitual y si se puede previsualizar en la documentación.

      Índice rápido

      Quiero...Dónde consultar
      Controlar el escáner de pantalla completa de bajo nivelCodeScanner
      Colocar un formulario estándar en un dialogDialogFormLayout
      Colocar un formulario estándar en un drawerDrawerFormLayout
      Permitir solo variables de entorno $envEnvVariableInput
      Introducir un tamaño de archivo y guardarlo como bytesFileSizeInput
      Editar configuración JSON / JSON5JsonTextArea
      Introducir una contraseña con indicador de fortalezaPasswordInput
      Cargar opciones de Select de forma asíncrona desde una APIRemoteSelect
      Añadir soporte de escaneo a un inputScanInput
      Permitir que un campo acepte constantes y variablesTypedVariableInput
      Permitir que un campo de una línea acepte variables como {{ $env.X }} y {{ $user.name }}VariableInput
      Insertar variables en configuración JSON / JSON5VariableJsonTextArea
      Permitir variables en texto multilíneaVariableTextArea
      Filtrar una Collection con varias condicionesCollectionFilter
      Incrustar un panel de filtro de Collection en una páginaCollectionFilterPanel
      Personalizar la fila arrastrable de una antd TableSortableRow
      Personalizar la columna de asa de arrastre de una TableSortHandle
      Mostrar listas, seleccionar filas y ordenar por arrastre en páginas de configuraciónTable
      Usar iconos de Ant Design o registrar iconos personalizadosIcon
      Crear un registro interno para extensiones del plugincreateFormRegistry

      Uso

      Importa los componentes que necesites en un plugin de cliente y úsalos como componentes React normales:

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

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

      Cuándo usarlos

      Por defecto usa React + Antd. Revisa primero estos componentes en escenarios habituales de plugins de NocoBase:

      • Abrir formularios en drawer o dialog en páginas de configuración
      • Insertar variables, editar JSON, introducir tamaños de archivo o escanear códigos en campos de formulario
      • Usar filtros de Collection o ordenación por arrastre en listas
      • Usar la entrada de iconos unificada de NocoBase

      Para entradas, botones y mensajes ordinarios, los componentes de Antd suelen ser más claros.

      Enlaces relacionados