مرجع API لمكوّن Combobox

الاستيراد

import-combobox.ts

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

NuiCombobox

حقل نصي يقترح عليك خيارات أثناء الكتابة.

المُحدِّد: nui-combobox

NuiCombobox: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`options`مُدخَل	`NuiOption<V>[]`		الخيارات، على هيئة كائنات `NuiOption`.
`value`ثنائي الاتجاه	`V \| null`	`null`	القيمة المختارة، أو `null`. ويعمل أيضًا مع النماذج.
`values`ثنائي الاتجاه	`readonly V[]`	`[]`	القيم المختارة، مع `multiple`.
`multiple`مُدخَل	`boolean`	`false`	يتيح اختيار عدة خيارات، تُعرض على هيئة شرائح.
`create`مُدخَل	`(text: string) => V`		يُنشئ قيمة من النص المكتوب، فتقترح القائمة إضافة النص الذي ليس خيارًا.
`filtering`مُدخَل	`boolean`	`true`	يُصفّي الخيارات أثناء الكتابة. أوقفه عندما يتولى الخادم التصفية.
`loading`مُدخَل	`boolean`	`false`	يعرض صف تحميل ريثما تصل النتائج.
`clearable`مُدخَل	`boolean`	`false`	يضيف زرًّا يمسح القيمة، ويتيح مسحها بمفتاح Esc.
`placeholder`مُدخَل	`string`	`''`	نص يظهر ما دام الحقل فارغًا.
`label`مُدخَل	`string`		الاسم الذي تقرؤه التقنيات المساعدة، إن لم يكن للحقل عنصر `<label>`.
`inputId`مُدخَل	`string`		معرّف (id) الحقل النصي، لاستخدامه مع `<label for>`.
`disabled`مُدخَل	`boolean`	`false`	يُعطّل الحقل.
`compareWith`مُدخَل	`(a: V, b: V) => boolean`	`Object.is`	يحدد ما إذا كانت قيمتان تمثلان الخيار نفسه، للقيم التي هي كائنات.
`displayWith`مُدخَل	`(value: V) => string`	`String`	نص قيمة ليست بين الخيارات، كقيمة ضُبطت قبل تحميل الخيارات.
`virtual`مُدخَل	`boolean \| 'auto'`	`'auto'`	يرسم الصفوف الظاهرة فقط: دائمًا، أو أبدًا، أو مع `auto` بعد 200 صف.
`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: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`nuiOptionText`مُدخَل	`NuiOptionRow<V>`		الصف، من سياق القالب.