Needless UI

Mga component

Select

Pumili ng isa o marami, mula sa maikli o napakahabang listahan.

Import

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

NuiSelect

Isang button na nagbubukas ng listahan ng mga opsyon.

Selector
nui-select
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. Nananatiling bukas ang listahan habang pumipili ka.
selectAllInputbooleanfalseKapag may multiple, nagdadagdag ng button na pumipili o nagki-clear ng lahat ng opsyon.
placeholderInputstring'Select…'Text na ipinapakita habang wala pang napipili.
labelInputstringAccessible name, kapag walang <label> na nagpapangalan sa button.
triggerIdInputstringId ng button, para sa <label for>.
disabledInputbooleanfalseDini-disable ang select.
compareWithInput(a: V, b: V) => booleanObject.isSinasabi kung iisang opsyon ang dalawang value, para sa mga value na object.
virtualInputboolean | 'auto''auto'Nire-render lang ang mga row na nakikita: palagi, hindi kailanman, o auto kapag lampas 200 row.
openChangeOutputbooleanNagfa-fire kapag bumukas o nagsara ang listahan.
showMethod() => voidBinubuksan ang listahan.
hideMethod() => voidIsinasara ang listahan.
focusMethod(options?: FocusOptions) => voidInililipat ang focus sa button.

Input din ang bawat text na ipinapakita o ina-announce nito, kaya puwede mo itong isalin: selectAllLabel clearAllLabel emptyLabel

NuiOption

Isang opsyon. Tinatanggap ito ng select, ng combobox at ng command palette.

PangalanUriDefaultPaglalarawan
valuePropertyVAng itinatakda kapag pinili ito. Kahit anong type.
labelPropertystringAng text na ipinapakita at hinahanap.
descriptionPropertystringPangalawang text sa ilalim ng label.
groupPropertystringNakalista nang sunod-sunod sa ilalim ng heading ng grupo ang mga opsyon na may parehong grupo.
keywordsPropertystring[]Iba pang salitang tinutugma ng search, gaya ng mga kasingkahulugan o code.
disabledPropertybooleanIpinapakita, pero hindi ito mapipili.
childrenPropertyNuiOption<V>[]Mga opsyon na isang level pababa, na ginagawang tree ang listahan.

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.