ngx mat select search
v7.0.0
https://github.com/bithost-gmbh/ngx-mat-select-search
مكون Angular يوفر حقل إدخال للبحث/تصفية خيارات MatSelect لمكتبة Angular Material.
شاهده عمليًا في
https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example
راجع مثال التعليمات البرمجية، الذي تم إنشاؤه في المتصفح، أحدث إصدار، أحدث إصدار للمواد
https://bithost-gmbh.github.io/ngx-mat-select-search/
مُصمم مسبقًا، أحدث إصدار، إصدار المواد الأقدم، يعمل على الهاتف المحمول
ملاحظة مهمة : يهدف هذا المشروع إلى أن يكون تطبيقًا مؤقتًا لـ angular/components#5697. الهدف هو التنفيذ في مستودع Angular Material الرسمي، وسيتم إنشاء علاقات عامة جديدة.
المساهمات مرحب بها، يرجى فتح قضية ويفضل تقديم طلب سحب.
نحن نهدف إلى تقديم أفضل خدمة ممكنة من خلال التحسين المستمر NgxMatSelectSearch والاستجابة السريعة لتقارير الأخطاء. نحن نفعل هذا مجانًا تمامًا. إذا كنت تشعر أن هذه المكتبة كانت مفيدة لك ووفرت لك ولعملك بعض الوقت الثمين، فيرجى التفكير في التبرع لدعم صيانتها ومواصلة تطويرها.
شكرا جزيلا لداعمينا الماليين!
فيليب فيكتور شولتز كلينجوف |
شكرا جزيلا لجميع المساهمين في مجتمعنا!
إستيبان جيرينج | ماركوس ماشلر | تريستان | Sirh3e | توني ه | ميشال ستاويكي |
أليكس فيريه | باطل | بليز ووكر | كريستيان رادوكانو | داميان ميراندا | داين فاندربيلت |
ديفيد سانسوم | إدغار شيرمان | إيرينديس | جوستافو ميراندا | هينو لاوينجر | باطل |
إبليس لين | جان فرانسوا سير | جو ديكوك | جمال جوني | جوناثان كولبرج | كريستوف جيليس |
ميلروي فان دن بيرج | محمد احسان عياض | أوفيديوس ستوكاس | راي سولزر | روبرت باتيس | رولاند بروكيما |
سيباستيان ويرزبيكي | باطل | ستاس أماسيف | تييري نيشيلويتزر | فلاد يوفي | باطل |
باطل | يشوع | باطل | باطل |
قم بتثبيت ngx-mat-select-search في مشروعك:
npm install ngx-mat-select-search
قم باستيراد NgxMatSelectSearchModule على سبيل المثال في app.module.ts الخاص بك:
import { MatSelectModule } from '@angular/material' ;
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search' ;
@ NgModule ( {
imports : [
...
MatSelectModule ,
NgxMatSelectSearchModule
] ,
} )
export class AppModule { } استخدم مكون ngx-mat-select-search داخل عنصر mat-select عن طريق وضعه داخل عنصر <mat-option> :
< mat-form-field >
< mat-select [formControl] =" bankCtrl " placeholder =" Bank " #singleSelect >
< mat-option >
< ngx-mat-select-search [formControl] =" bankFilterCtrl " > </ ngx-mat-select-search >
</ mat-option >
< mat-option *ngFor =" let bank of filteredBanks | async " [value] =" bank " >
{{bank.name}}
</ mat-option >
</ mat-select >
</ mat-form-field > راجع الأمثلة في https://github.com/bithost-gmbh/ngx-mat-select-search/tree/master/src/app/examples كيفية توصيل ngx-mat-select-search وتصفية الخيارات المتاحة. أو قم بإلقاء نظرة على https://github.com/bithost-gmbh/ngx-mat-select-search-example لرؤيته في تطبيق مستقل.
يمكنك بدلاً من ذلك استخدامه مع النماذج المستندة إلى القالب كما يلي:
< ngx-mat-select-search ngModel (ngModelChange) =" filterMyOptions($event) " >من أجل تغيير التسميات، استخدم المدخلات المحددة في قسم API على النحو التالي:
< ngx-mat-select-search [formControl] =" bankFilterCtrl "
placeholderLabel =" Find bank... "
noEntriesFoundLabel =" 'no matching bank found' " > </ ngx-mat-select-search > لاستخدام i18n API لترجمة التسميات، قم بإضافة سمات i18n-... المقابلة:
< ngx-mat-select-search [formControl] =" bankFilterCtrl "
placeholderLabel =" Find bank... "
i18n-placeholderLabel
noEntriesFoundLabel =" 'no matching bank found' "
i18n-noEntriesFoundLabel > </ ngx-mat-select-search >@angular/core : ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0@angular/material : ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 مع MatSelectModule ( @angular/material/select ) 6.0.0@angular/core : ^15.0.0@angular/material : ^15.0.0 باستخدام MatLegacySelectModule ( @angular/material/legacy-select ) 5.0.0@angular/core : ^12.0.0 || ^13.0.0 || ^14.0.0@angular/material : ^12.0.0 || ^13.0.0 || ^14.0.0 3.3.3@angular/core : ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0@angular/material : ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 1.8.0@angular/core : ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0@angular/material : ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 يقوم MatSelectSearchComponent بتنفيذ واجهة ControlValueAccessor. علاوة على ذلك، فإنه يوفر المدخلات التالية:
/** Label of the search placeholder */
@ Input ( ) placeholderLabel = 'Suche' ;
/** Type of the search input field */
@ Input ( ) type = 'text' ;
/** Font-based icon used for displaying Close-Icon */
@ Input ( ) closeIcon = 'close' ;
/** SVG-based icon used for displaying Close-Icon. If set, closeIcon is overridden */
@ Input ( ) closeSvgIcon ?: string ;
/** Label to be shown when no entries are found. Set to null if no message should be shown. */
@ Input ( ) noEntriesFoundLabel = 'Keine Optionen gefunden' ;
/**
* Whether the search field should be cleared after the dropdown menu is closed.
* Useful for server-side filtering. See [#3](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/3)
*/
@ Input ( ) clearSearchInput = true ;
/** Whether to show the search-in-progress indicator */
@ Input ( ) searching = false ;
/** Disables initial focusing of the input field */
@ Input ( ) disableInitialFocus = false ;
/** Enable clear input on escape pressed */
@ Input ( ) enableClearOnEscapePressed = false ;
/**
* Prevents home / end key being propagated to mat-select,
* allowing to move the cursor within the search input instead of navigating the options
*/
@ Input ( ) preventHomeEndKeyPropagation = false ;
/** Disables scrolling to active options when option list changes. Useful for server-side search */
@ Input ( ) disableScrollToActiveOnOptionsChanged = false ;
/** Adds 508 screen reader support for search box */
@ Input ( ) ariaLabel = 'dropdown search' ;
/** Whether to show Select All Checkbox (for mat-select[multi=true]) */
@ Input ( ) showToggleAllCheckbox = false ;
/** Select all checkbox checked state */
@ Input ( ) toggleAllCheckboxChecked = false ;
/** select all checkbox indeterminate state */
@ Input ( ) toggleAllCheckboxIndeterminate = false ;
/** Display a message in a tooltip on the toggle-all checkbox */
@ Input ( ) toggleAllCheckboxTooltipMessage = '' ;
/** Define the position of the tooltip on the toggle-all checkbox. */
@ Input ( ) toggleAllCheckboxTooltipPosition: 'left' | 'right' | 'above' | 'below' | 'before' | 'after' = 'below' ;
/** Show/Hide the search clear button of the search input */
@ Input ( ) hideClearSearchButton = false ;
/**
* Always restore selected options on selectionChange for mode multi (e.g. for lazy loading/infinity scrolling).
* Defaults to false, so selected options are only restored while filtering is active.
*/
@ Input ( ) alwaysRestoreSelectedOptionsMulti = false ;
/**
* Recreate array of selected values for multi-selects.
*
* This is useful if the selected values are stored in an immutable data structure.
*/
@ Input ( ) recreateValuesArray = false ;
/** Output emitter to send to parent component with the toggle all boolean */
@ Output ( ) toggleAll = new EventEmitter < boolean > ( ) ;
من أجل تخصيص أيقونة البحث، أضف ngxMatSelectSearchClear إلى العنصر الواضح المخصص لديك ( mat-icon أو أي عنصر آخر) وضعه داخل مكون ngx-mat-select-search :
< ngx-mat-select-search >
< mat-icon ngxMatSelectSearchClear > delete </ mat-icon >
</ ngx-mat-select-search > إذا كان يجب تغيير الرمز فقط، فيمكن استخدام المدخلات closeIcon و closeSvgIcon .
من أجل تخصيص عنصر عدم العثور على إدخالات، قم بإضافة ngxMatSelectNoEntriesFound إلى العنصر المخصص الخاص بك ( mat-icon, span, button أو أي عنصر آخر) ووضعه داخل مكون ngx-mat-select-search :
< ngx-mat-select-search >
< span ngxMatSelectNoEntriesFound >
No entries found
< button mat-button color =" primary " >
Add < mat-icon > add </ mat-icon >
</ button >
</ span >
</ ngx-mat-select-search > يمكن تحويل المحتوى المخصص مع محتوى فئة CSS mat-select-search-custom-header-content على النحو التالي:
< ngx-mat-select-search >
< div class =" mat-select-search-custom-header-content " > something special </ div >
</ ngx-mat-select-search > من خلال توفير MAT_SELECTSEARCH_DEFAULT_OPTIONS حقن Token، يمكن تعيين القيم الافتراضية للعديد من خصائص @Input() بشكل عام. راجع وثائق خصائص @Input() المقابلة لـ MatSelectSearchComponent .
مثال:
import { MAT_SELECTSEARCH_DEFAULT_OPTIONS , MatSelectSearchOptions } from 'ngx-mat-select-search' ;
@ NgModule ( {
...
providers : [
{
provide : MAT_SELECTSEARCH_DEFAULT_OPTIONS ,
useValue : < MatSelectSearchOptions > {
closeIcon : 'delete' ,
noEntriesFoundLabel : 'No options found' ,
}
}
]
} )
class AppModule { } تم إنشاء هذا المشروع باستخدام Angular CLI الإصدار 1.7.1.
قم بتشغيل ng serve لخادم التطوير. انتقل إلى http://localhost:4200/ . سيتم إعادة تحميل التطبيق تلقائيًا إذا قمت بتغيير أي من الملفات المصدر.
قم بتشغيل ng build لبناء المشروع. سيتم تخزين عناصر البناء في الدليل dist/ . استخدم علامة -prod لبناء الإنتاج.
قم بتشغيل npm run build-lib لبناء المكتبة وإنشاء حزمة NPM. سيتم تخزين عناصر البناء في المجلد dist-lib/ .
للإصدار، قم بتشغيل cd dist-lib/ && npm publish .
قم بتشغيل npm run test لتنفيذ اختبارات الوحدة عبر Karma.
