Needless UI

Componentes

Campo OTP

Códigos de verificação em caixas separadas, sobre uma única entrada real.

Importação

import-otp.ts
import { NuiOtp, NuiOtpInput } from '@needless-ui/angular/otp';

NuiOtp

Desenha as caixas e envolve a entrada.

Seletor
[nuiOtp]
NomeTipoPadrãoDescrição
lengthInputnumber6Número de caracteres.
patternInput'digits' | 'alphanumeric''digits'digits, ou alphanumeric para letras e dígitos.
groupsInputnumber[][]Tamanhos dos grupos, desenhados com um separador entre eles, como [3, 3].
maskedInputbooleanfalseDesenha pontos em vez dos caracteres.
completedOutputstringEmite o código sempre que a última caixa é preenchida.

NuiOtpInput

A entrada real. Ela recebe os atributos de que um código de uso único precisa.

Seletor
input[nuiOtpInput]
NomeTipoPadrãoDescrição
webOtpInputbooleanfalsePreenche o código a partir de um SMS recebido, pela API WebOTP, onde houver suporte.