Aparência

Aqui está uma lista de todos os parâmetros aceitos no aparência objeto presente nas opções do Document Detector.

Aprimorado na v6.8.3: A configuração de aparência agora usa um formato de objeto aninhado para melhor organização e legibilidade.

Parâmetro

Tipo

geral

Personalizações gerais de aparência para o SDK.

Geral

captura

Personalizações de aparência para os modos de captura "manual" e "automático".

Captura

envio

Personalizações de aparência para o modo de captura "upload".

Envio

Formato de configuração

As opções de aparência usam um formato de objeto aninhado para melhor organização:

appearance: {
  general: {
    fontFamily: "arial",
    closeButtonIconColor: "#FFFFFF"
  },
  capture: {
    captureButtonIconSize: "100%",
    captureButtonColor: "#FFFFFF",
    hideCaptureTitle: false
  },
  upload: {
    backgroundColor: "#BDBDBD",
    card: {
      backgroundColor: "#FFFFFF"
    },
    startScreen: {
      title: { color: "#323232" },
      details: { color: "#828282" },
      allowButton: {
        backgroundColor: "#323232",
        label: { color: "#FFFFFF" }
      }
    }
  }
}

Se você estiver atualizando de uma versão anterior, suas configurações existentes com notação pontuada (por exemplo, "general.fontFamily": "arial") continuarão funcionando, mas recomendamos migrar para o formato de objeto aninhado mostrado acima.

Geral

Parâmetro

Tipo

Valor Padrão

família da fonte

Altera a fonte de todos os elementos contidos no SDK.

Exemplo: general: { fontFamily: "arial" }

string

A família da fonte é herdada da página.

cor do ícone do botão de fechar

Personalização da cor do ícone do botão de fechar do SDK.

Exemplo: general: { closeButtonIconColor: "red" }

string

"#fff"

Captura

Parâmetro

Tipo

Valor Padrão

ícone do botão de captura

Personalização da origem do ícone de captura.

Opções: URL da imagem ou SVG em base64.

Exemplo: capture: { captureButtonIcon: "url" }

string

O ícone padrão do botão de captura é usado.

tamanho do ícone do botão de captura

Personalização do tamanho do ícone de captura.

Exemplo: capture: { captureButtonIconSize: "50%" }

string

"100%"

cor do botão de captura

Personalização da cor do botão de captura.

Exemplo: capture: { captureButtonColor: "green" }

string

"#fff"

ocultar título de captura

Oculta o título de captura.

Exemplo: capture: { hideCaptureTitle: true }

booleano

false

Envio

Parâmetro

Tipo

Valor Padrão

cor de fundo

Modo de upload - cor de fundo.

Exemplo: upload: { backgroundColor: "gray" }

string

#BDBDBD

cor de fundo do cartão

Modo de upload - cor de fundo do cartão.

Exemplo: upload: { card: { backgroundColor: "white" } }

string

#FFFFFF

cor do título da startScreen

Modo de upload - tela inicial - cor do título.

Exemplo: upload: { startScreen: { title: { color: "black" } } }

string

"#323232"

cor dos detalhes da startScreen

Modo de upload - tela inicial - cor dos detalhes.

Exemplo: upload: { startScreen: { details: { color: "gray" } } }

string

"#828282"

cor de fundo do botão allowButton da startScreen

Modo de upload - tela inicial - cor de fundo do botão de permitir.

Exemplo: upload: { startScreen: { allowButton: { backgroundColor: "black" } } }

string

"#323232"

cor do rótulo do botão allowButton da startScreen

Modo de upload - tela inicial - cor do rótulo do botão de permitir.

Exemplo: upload: { startScreen: { allowButton: { label: { color: "white" } } } }

string

"#FFFFFF"

cor do ícone da loadingScreen

Modo de upload - tela de carregamento - cor do ícone.

Exemplo: upload: { loadingScreen: { icon: { color: "black" } } }

string

"#000000"

cor do texto da loadingScreen

Modo de upload - tela de carregamento - cor do texto.

Exemplo: upload: { loadingScreen: { text: { color: "black" } } }

string

"#323232"

cor do ícone da failureScreen

Modo de upload - tela de falha - cor do ícone.

Exemplo: upload: { failureScreen: { icon: { color: "red" } } }

string

"#E21B45"

cor da sombra do ícone da failureScreen

Modo de upload - tela de falha - cor da sombra do ícone.

Exemplo: upload: { failureScreen: { icon: { shadowColor: "indianred" } } }

string

"#FFE4E6"

cor do título da failureScreen

Modo de upload - tela de falha - cor do título.

Exemplo: upload: { failureScreen: { title: { color: "black" } } }

string

"#323232"

cor dos detalhes da failureScreen

Modo de upload - tela de falha - cor dos detalhes.

Exemplo: upload: { failureScreen: { details: { color: "gray" } } }

string

"#828282"

cor de fundo do botão retryButton da failureScreen

Modo de upload - tela de falha - cor de fundo do botão de tentar novamente.

Exemplo: upload: { failureScreen: { retryButton: { backgroundColor: "red" } } }

string

"#E21B45"

cor do rótulo do botão retryButton da failureScreen

Modo de upload - tela de falha - cor do rótulo do botão de tentar novamente.

Exemplo: upload: { failureScreen: { retryButton: { label: { color: "white" } } } }

string

"#FFFFFF"

cor do ícone da successScreen

Modo de upload - tela de sucesso - cor do ícone.

Exemplo: upload: { successScreen: { icon: { color: "green" } } }

string

"#0BAA43"

cor da sombra do ícone da successScreen

Modo de upload - tela de sucesso - cor da sombra do ícone.

Exemplo: upload: { successScreen: { icon: { shadowColor: "darkseagreen" } } }

string

"#DAFEE5"

cor do texto da successScreen

Modo de upload - tela de sucesso - cor do texto.

Exemplo: upload: { successScreen: { text: { color: "green" } } }

string

"#0BAA43"

Abaixo estão capturas de tela que demonstram onde cada opção é aplicada nas telas do SDK para o Envio modo.

Todas as telas (modo upload)

Tela inicial (modo upload)

Tela de carregamento (modo upload)

Tela de sucesso (modo upload)

Tela de falha (modo upload)

Atualizado há 12 meses