Needless UI

Komponen

Combobox

Kolom teks yang menyarankan opsi saat Anda mengetik.

Impor

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

NuiCombobox

Kolom teks yang menyarankan opsi saat Anda mengetik.

Selektor
nui-combobox
NamaTipeDefaultDeskripsi
optionsInputNuiOption<V>[]Opsi-opsinya, sebagai objek NuiOption.
valueDua arahV | nullnullNilai yang dipilih, atau null. Juga bekerja dengan formulir.
valuesDua arahreadonly V[][]Nilai-nilai yang dipilih, dengan multiple.
multipleInputbooleanfalseMemungkinkan beberapa opsi dipilih, yang ditampilkan sebagai chip.
createInput(text: string) => VMembuat nilai dari teks yang diketik. Daftar lalu menawarkan untuk menambahkan teks yang belum menjadi opsi.
filteringInputbooleantrueMenyaring opsi saat Anda mengetik. Matikan jika server yang menyaringnya.
loadingInputbooleanfalseMenampilkan baris pemuatan selama menunggu hasil.
clearableInputbooleanfalseMenambahkan tombol untuk mengosongkan nilai, dan memungkinkan Esc mengosongkannya.
placeholderInputstring''Teks yang ditampilkan saat kolom kosong.
labelInputstringNama aksesibel, jika tidak ada <label> yang menamai kolom.
inputIdInputstringId kolom teks, untuk <label for>.
disabledInputbooleanfalseMenonaktifkan kolom.
compareWithInput(a: V, b: V) => booleanObject.isMenentukan apakah dua nilai adalah opsi yang sama, untuk nilai berupa objek.
displayWithInput(value: V) => stringStringTeks untuk nilai yang tidak ada di antara opsi, misalnya nilai yang ditetapkan sebelum opsi dimuat.
virtualInputboolean | 'auto''auto'Hanya merender baris yang terlihat: selalu, tidak pernah, atau auto jika lebih dari 200 baris.
queryChangeOutputstringMengirimkan teks selagi diketik, untuk pencarian di server.
openChangeOutputbooleanTerpicu saat daftar terbuka atau tertutup.
showMetode() => voidMembuka daftar.
hideMetode() => voidMenutup daftar.
clearMetode() => voidMengosongkan nilai dan teks.
focusMetode(options?: FocusOptions) => voidMemfokuskan kolom teks.

Setiap teks yang ditampilkan atau diumumkannya juga merupakan input, jadi Anda bisa menerjemahkannya: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Pasang pada ng-template di dalam komponen untuk menggambar sendiri setiap baris. Konteksnya berisi opsi dan barisnya.

Selektor
ng-template[nuiOptionTemplate]

NuiOptionText

Menggambar label opsi dengan huruf yang cocok ditandai, beserta deskripsi dan jalurnya, untuk baris buatan Anda sendiri.

Selektor
[nuiOptionText]
NamaTipeDefaultDeskripsi
nuiOptionTextInputNuiOptionRow<V>Baris dari konteks template.