Needless UI

કમ્પોનન્ટ્સ

Combobox

ટાઇપ કરતાં જ વિકલ્પો સૂચવતું ટેક્સ્ટ ફીલ્ડ.

ઇમ્પોર્ટ

import-combobox.ts
import { NuiCombobox, type NuiOption } from '@needless-ui/angular/select';

NuiCombobox

ટાઇપ કરતાં જ વિકલ્પો સૂચવતું ટેક્સ્ટ ફીલ્ડ.

સિલેક્ટર
nui-combobox
નામપ્રકારડિફૉલ્ટવર્ણન
optionsઇનપુટNuiOption<V>[]વિકલ્પો, NuiOption ઑબ્જેક્ટ તરીકે.
valueદ્વિમાર્ગીV | nullnullપસંદ કરેલું મૂલ્ય, અથવા null. ફૉર્મ સાથે પણ કામ કરે છે.
valuesદ્વિમાર્ગીreadonly V[][]પસંદ કરેલાં મૂલ્યો, multiple સાથે.
multipleઇનપુટbooleanfalseઅનેક વિકલ્પો પસંદ કરવા દે છે, જે ચિપ્સ તરીકે દેખાય છે.
createઇનપુટ(text: string) => Vટાઇપ કરેલા ટેક્સ્ટમાંથી મૂલ્ય બનાવે છે. પછી યાદી, વિકલ્પ ન હોય તેવું ટેક્સ્ટ ઉમેરવાનું સૂચવે છે.
filteringઇનપુટbooleantrueટાઇપ કરતાં વિકલ્પોને ફિલ્ટર કરે છે. સર્વર તેમને ફિલ્ટર કરે ત્યારે તેને બંધ કરો.
loadingઇનપુટbooleanfalseપરિણામો આવી રહ્યાં હોય ત્યારે લોડિંગ હરોળ બતાવે છે.
clearableઇનપુટbooleanfalseમૂલ્ય સાફ કરતું બટન ઉમેરે છે, અને Escape વડે પણ તેને સાફ કરવા દે છે.
placeholderઇનપુટstring''ફીલ્ડ ખાલી હોય ત્યારે દેખાતું ટેક્સ્ટ.
labelઇનપુટstringઍક્સેસિબલ નામ, જ્યારે કોઈ <label> ફીલ્ડને નામ ન આપતું હોય.
inputIdઇનપુટstringટેક્સ્ટ ફીલ્ડનું id, <label for> માટે.
disabledઇનપુટbooleanfalseફીલ્ડને ડિસેબલ કરે છે.
compareWithઇનપુટ(a: V, b: V) => booleanObject.isબે મૂલ્યો એક જ વિકલ્પ છે કે નહીં તે જણાવે છે, ઑબ્જેક્ટ હોય તેવાં મૂલ્યો માટે.
displayWithઇનપુટ(value: V) => stringStringવિકલ્પોમાં ન હોય તેવા મૂલ્યનું ટેક્સ્ટ, જેમ કે વિકલ્પો લોડ થાય તે પહેલાં સેટ કરેલું મૂલ્ય.
virtualઇનપુટboolean | 'auto''auto'ફક્ત દેખાતી હરોળ રેન્ડર કરે છે: હંમેશાં, ક્યારેય નહીં, અથવા 200 હરોળ પછી auto.
queryChangeઆઉટપુટstringટાઇપ થતાં જ ટેક્સ્ટ એમિટ કરે છે, સર્વર પર શોધ માટે.
openChangeઆઉટપુટbooleanયાદી ખૂલે કે બંધ થાય ત્યારે એમિટ કરે છે.
showમેથડ() => voidયાદી ખોલે છે.
hideમેથડ() => voidયાદી બંધ કરે છે.
clearમેથડ() => voidમૂલ્ય અને ટેક્સ્ટ સાફ કરે છે.
focusમેથડ(options?: FocusOptions) => voidટેક્સ્ટ ફીલ્ડ પર ફોકસ કરે છે.

તે જે ટેક્સ્ટ બતાવે છે કે જાહેર કરે છે, તે દરેક પણ ઇનપુટ છે, જેથી તમે તેનો અનુવાદ કરી શકો: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

દરેક હરોળ જાતે દોરવા માટે તેને કમ્પોનન્ટની અંદરના ng-template પર મૂકો. કૉન્ટેક્સ્ટમાં વિકલ્પ અને તેની હરોળ હોય છે.

સિલેક્ટર
ng-template[nuiOptionTemplate]

NuiOptionText

તમારી પોતાની હરોળ માટે વિકલ્પનું લેબલ દોરે છે, મેળ ખાતા અક્ષરો હાઇલાઇટ કરીને, સાથે તેનું વર્ણન અને પાથ.

સિલેક્ટર
[nuiOptionText]
નામપ્રકારડિફૉલ્ટવર્ણન
nuiOptionTextઇનપુટNuiOptionRow<V>હરોળ, ટેમ્પ્લેટ કૉન્ટેક્સ્ટમાંથી.