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

الاستيراد

import-select.ts

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

NuiSelect

زر يفتح قائمة خيارات.

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

NuiSelect: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`options`مُدخَل	`NuiOption<V>[]`		الخيارات، على هيئة كائنات `NuiOption`.
`value`ثنائي الاتجاه	`V \| null`	`null`	القيمة المختارة، أو `null`. ويعمل أيضًا مع النماذج.
`values`ثنائي الاتجاه	`readonly V[]`	`[]`	القيم المختارة، مع `multiple`.
`multiple`مُدخَل	`boolean`	`false`	يتيح اختيار عدة خيارات. وتبقى القائمة مفتوحة أثناء الاختيار.
`selectAll`مُدخَل	`boolean`	`false`	مع `multiple`، يضيف زرًّا يحدد كل الخيارات أو يُلغي تحديدها.
`placeholder`مُدخَل	`string`	`'Select…'`	نص يظهر ما دام لم يُختر شيء.
`label`مُدخَل	`string`		الاسم الذي تقرؤه التقنيات المساعدة، إن لم يكن للزر عنصر `<label>`.
`triggerId`مُدخَل	`string`		معرّف (id) الزر، لاستخدامه مع `<label for>`.
`disabled`مُدخَل	`boolean`	`false`	يُعطّل المكوّن.
`compareWith`مُدخَل	`(a: V, b: V) => boolean`	`Object.is`	يحدد ما إذا كانت قيمتان تمثلان الخيار نفسه، للقيم التي هي كائنات.
`virtual`مُدخَل	`boolean \| 'auto'`	`'auto'`	يرسم الصفوف الظاهرة فقط: دائمًا، أو أبدًا، أو مع `auto` بعد 200 صف.
`openChange`مُخرَج	`boolean`		يُطلَق عند فتح القائمة أو إغلاقها.
`show`دالة	`() => void`		يفتح القائمة.
`hide`دالة	`() => void`		يُغلق القائمة.
`focus`دالة	`(options?: FocusOptions) => void`		ينقل التركيز إلى الزر.

كل نص يعرضه أو يُعلنه هو مُدخَل أيضًا، لذا يمكنك ترجمته: selectAllLabel clearAllLabel emptyLabel

NuiOption

خيار واحد. تقبله مكوّنات Select وCombobox ولوحة الأوامر جميعها.

NuiOption: الخصائص
الاسم	النوع	الوصف
`value`خاصية	`V`	ما يُضبط عند اختياره. من أي نوع.
`label`خاصية	`string`	النص المعروض والذي يُبحث فيه.
`description`خاصية	`string`	نص ثانوي تحت التسمية.
`group`خاصية	`string`	تُدرج الخيارات ذات المجموعة نفسها تحت عنوان تلك المجموعة، بالترتيب.
`keywords`خاصية	`string[]`	كلمات إضافية يطابقها البحث، مثل المرادفات أو الرموز.
`disabled`خاصية	`boolean`	يظهر، لكن لا يمكن اختياره.
`children`خاصية	`NuiOption<V>[]`	خيارات في المستوى التالي، تجعل القائمة شجرة.

NuiOptionTemplate

ضعه على ng-template داخل المكوّن لترسم كل صف بنفسك. ويحتوي السياق على الخيار وصفّه.

المُحدِّد: ng-template[nuiOptionTemplate]

NuiOptionText

يرسم تسمية الخيار مع تمييز الأحرف المطابقة، ووصفه ومساره، لاستخدامها في صفوفك الخاصة.

المُحدِّد: [nuiOptionText]

NuiOptionText: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`nuiOptionText`مُدخَل	`NuiOptionRow<V>`		الصف، من سياق القالب.