• Português

      • Componentes compartilhados

      O NocoBase client v2 inclui um conjunto de componentes compartilhados. Ao criar páginas de plugin, páginas de configuração ou formulários, você pode usá-los diretamente para reutilizar a UI e as interações preparadas pelo NocoBase.

      Esta seção organiza os componentes por cenário de uso. Cada página apresenta um único componente: quando usar, a API comum e se ele pode ser pré-visualizado na documentação.

      Índice rápido

      Quero...Onde ver
      Controlar o scanner de tela cheia de baixo nívelCodeScanner
      Colocar um formulário padrão em um dialogDialogFormLayout
      Colocar um formulário padrão em um drawerDrawerFormLayout
      Permitir apenas variáveis de ambiente $envEnvVariableInput
      Informar um tamanho de arquivo e armazená-lo em bytesFileSizeInput
      Editar configuração JSON / JSON5JsonTextArea
      Informar uma senha com indicador de forçaPasswordInput
      Carregar opções de Select de forma assíncrona a partir de uma APIRemoteSelect
      Adicionar suporte a escaneamento em um inputScanInput
      Permitir que um campo aceite constantes e variáveisTypedVariableInput
      Permitir que um campo de linha única aceite variáveis como {{ $env.X }} e {{ $user.name }}VariableInput
      Inserir variáveis em configuração JSON / JSON5VariableJsonTextArea
      Permitir variáveis em texto multilinhaVariableTextArea
      Filtrar uma Collection com múltiplas condiçõesCollectionFilter
      Incorporar um painel de filtro de Collection em uma páginaCollectionFilterPanel
      Personalizar a linha arrastável de uma antd TableSortableRow
      Personalizar a coluna de alça de arraste de uma TableSortHandle
      Exibir listas, selecionar linhas e ordenar por arraste em páginas de configuraçãoTable
      Usar ícones do Ant Design ou registrar ícones personalizadosIcon
      Criar um registro interno para itens de extensão do plugincreateFormRegistry

      Uso

      Importe os componentes necessários em um plugin de cliente e use-os como componentes React comuns:

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

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

      Quando usar

      Por padrão, use React + Antd. Para cenários comuns de plugins NocoBase, confira estes componentes primeiro:

      • Abrir formulários em drawer ou dialog em páginas de configuração
      • Inserir variáveis, editar JSON, informar tamanhos de arquivo ou escanear códigos em campos de formulário
      • Usar filtros de Collection ou ordenação por arraste em listas
      • Usar a entrada unificada de ícones do NocoBase

      Para entradas, botões e mensagens comuns, os componentes Antd geralmente são mais claros.