Needless UI

Mga component

OTP input

Mga verification code sa magkakahiwalay na slot, sa iisang totoong input.

Import

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

NuiOtp

Iginuguhit ang mga slot at binabalot ang input.

Selector
[nuiOtp]
PangalanUriDefaultPaglalarawan
lengthInputnumber6Bilang ng mga character.
patternInput'digits' | 'alphanumeric''digits'digits, o alphanumeric para sa mga titik at digit.
groupsInputnumber[][]Mga laki ng grupo, na may separator sa pagitan nila, gaya ng [3, 3].
maskedInputbooleanfalseGumuguhit ng mga tuldok sa halip na ang mga character.
completedOutputstringInilalabas ang code tuwing napupuno ang huling slot.

NuiOtpInput

Ang totoong input. Nakukuha nito ang mga attribute na kailangan ng isang one-time code.

Selector
input[nuiOtpInput]
PangalanUriDefaultPaglalarawan
webOtpInputbooleanfalsePinupunan ang code mula sa papasok na SMS sa pamamagitan ng WebOTP API, kung suportado.