Needless UI

Mga component

Combobox

Isang text field na nagmumungkahi ng mga opsyon habang nagta-type ka.

Import

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

NuiCombobox

Isang text field na nagmumungkahi ng mga opsyon habang nagta-type ka.

Selector
nui-combobox
PangalanUriDefaultPaglalarawan
optionsInputNuiOption<V>[]Ang mga opsyon, bilang mga NuiOption object.
valueTwo-wayV | nullnullAng napiling value, o null. Gumagana rin sa mga form.
valuesTwo-wayreadonly V[][]Ang mga napiling value, kapag may multiple.
multipleInputbooleanfalsePinapayagang pumili ng ilang opsyon, na ipinapakita bilang mga chip.
createInput(text: string) => VGumagawa ng value mula sa itinipang text. Nag-aalok ang listahan na idagdag ang text na hindi pa opsyon.
filteringInputbooleantrueFini-filter ang mga opsyon habang nagta-type ka. I-off ito kapag server ang nagfi-filter.
loadingInputbooleanfalseNagpapakita ng loading row habang hinihintay ang mga resulta.
clearableInputbooleanfalseNagdadagdag ng button na nagki-clear ng value, at pinapayagang i-clear ito ng Escape.
placeholderInputstring''Text na ipinapakita habang walang laman ang field.
labelInputstringAccessible name, kapag walang <label> na nagpapangalan sa field.
inputIdInputstringId ng text field, para sa <label for>.
disabledInputbooleanfalseDini-disable ang field.
compareWithInput(a: V, b: V) => booleanObject.isSinasabi kung iisang opsyon ang dalawang value, para sa mga value na object.
displayWithInput(value: V) => stringStringText para sa value na wala sa mga opsyon, gaya ng value na na-set bago mag-load ang mga ito.
virtualInputboolean | 'auto''auto'Nire-render lang ang mga row na nakikita: palagi, hindi kailanman, o auto kapag lampas 200 row.
queryChangeOutputstringInilalabas ang text habang itinitipa ito, para sa search sa server.
openChangeOutputbooleanNagfa-fire kapag bumukas o nagsara ang listahan.
showMethod() => voidBinubuksan ang listahan.
hideMethod() => voidIsinasara ang listahan.
clearMethod() => voidKini-clear ang value at ang text.
focusMethod(options?: FocusOptions) => voidInililipat ang focus sa text field.

Input din ang bawat text na ipinapakita o ina-announce nito, kaya puwede mo itong isalin: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Ilagay ito sa isang ng-template sa loob ng component para ikaw mismo ang gumuhit ng bawat row. Nasa context ang opsyon at ang row nito.

Selector
ng-template[nuiOptionTemplate]

NuiOptionText

Iginuguhit ang label ng opsyon na may markang mga tumugmang titik, pati ang description at path nito, para sa sarili mong mga row.

Selector
[nuiOptionText]
PangalanUriDefaultPaglalarawan
nuiOptionTextInputNuiOptionRow<V>Ang row, mula sa template context.