Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.malga.io/llms.txt

Use this file to discover all available pages before exploring further.

Buscando oferecer mais flexibilidade, disponibilizamos um objeto que permite aplicar os estilos desejados nos inputs da nossa aplicação. Existem algumas regras para a utilização desse objeto, que estão detalhadas abaixo. 
// Aplicação em todos os inputs do hosted fields.
styles: {
 input: {
  color: "orange",
  "font-size": "16px",
  },
} 
// Mudando cor do text apenas do input de card-number (serve para os demais)
".card-number": {
  color: "blue",
}

// Mudando a cor do text na hora do focus para todos os inputs
":focus": {
 color: "red",
}

// Exemplo contendo as 3 mudanças citadas.
styles: {
  input: {
    color: "orange",
    "font-size": "16px",
  },
  ".card-number": {
    color: "blue",
  },
  ":focus": {
    color: "red",
  },
}
Além disso, temos quatro classes específicas para lidar com estado do input, são elas:
ClasseDescrição
malga-hosted-fieldAplicada ao elemento pai do iframe. Responsável por estilizar a área externa do input (recomenda-se definir border, border-radius, etc.).
malga-hosted-field-focusedAplicada quando o input recebe foco.
malga-hosted-field-validAplicada quando a validação é bem-sucedida (valid === true).
malga-hosted-field-invalidAplicada quando há um erro e a validação falha (valid === false).
Essas classes podem ser adicionadas na folha de estilo da sua aplicação. 
.malga-hosted-field {
  background-color: white
  border: 2px solid #39BFAD
  border-radius: 8px
}

.malga-hosted-field-focused {
  border-color: #147F70
}

.malga-hosted-field-valid {
  border-color: green
}

.malga-hosted-field-invalid {
  border-color: red
}

Eventos

Aprenda a utilizar os eventos disponíveis