ngx mat select search
v7.0.0
https://github.com/bithost-gmbh/ngx-mat-select-search
องค์ประกอบเชิงมุมให้ช่องป้อนข้อมูลสำหรับการค้นหา / กรองตัวเลือก MatSelect ของไลบรารีวัสดุเชิงมุม
ชมผลงานได้ที่.
https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example
ดูโค้ดตัวอย่าง บิวด์ในเบราว์เซอร์ เวอร์ชันล่าสุด เวอร์ชันวัสดุล่าสุด
https://bithost-gmbh.github.io/ngx-mat-select-search/
สร้างไว้ล่วงหน้า เวอร์ชันล่าสุด เวอร์ชันวัสดุเก่า ใช้งานได้บนมือถือ
หมายเหตุสำคัญ : โครงการนี้มีจุดมุ่งหมายเพื่อเป็นการใช้งานเชิงมุม/ส่วนประกอบ #5697 ชั่วคราว เป้าหมายคือการนำไปใช้ในพื้นที่เก็บข้อมูล Angular Material อย่างเป็นทางการ โดย PR ใหม่จะถูกสร้างขึ้น
ยินดีให้การสนับสนุน โปรดเปิดประเด็นและยื่นคำขอดึงจะดีกว่า
เรามุ่งมั่นที่จะให้บริการที่ดีที่สุดเท่าที่จะเป็นไปได้โดยการปรับปรุง 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 InjectionToken ค่าเริ่มต้นของคุณสมบัติ @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 สำหรับเซิร์ฟเวอร์ dev ไปที่ http://localhost:4200/ แอปจะโหลดซ้ำโดยอัตโนมัติหากคุณเปลี่ยนแปลงไฟล์ต้นฉบับใดๆ
รัน ng build เพื่อสร้างโปรเจ็กต์ สิ่งประดิษฐ์ของบิลด์จะถูกจัดเก็บไว้ในไดเร็กทอรี dist/ ใช้แฟล็ก -prod สำหรับบิลด์ที่ใช้งานจริง
รัน npm run build-lib เพื่อสร้างไลบรารีและสร้างแพ็คเกจ NPM สิ่งประดิษฐ์ของบิลด์จะถูกจัดเก็บไว้ในโฟลเดอร์ dist-lib/
หากต้องการปล่อย ให้รัน cd dist-lib/ && npm publish
รัน npm run test เพื่อดำเนินการทดสอบหน่วยผ่าน Karma
