ngx mat select search下載 - ngx mat select search原始碼下載

NgxMatSelect搜尋

https://github.com/bithost-gmbh/ngx-mat-select-search

它有什麼作用？

Angular 元件提供一個輸入字段，用於搜尋/過濾 Angular 材質庫的 MatSelect 選項。

嘗試一下

請參閱以下網址的實際操作：

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 儲存庫中實現，將創建一個新的 PR。

貢獻

歡迎貢獻，請打開問題並最好提交拉取請求。

支持發展

我們的目標是透過不斷改進NgxMatSelectSearch並快速回應錯誤報告來提供盡可能最好的服務。我們完全免費這樣做。如果您覺得這個庫對您有用並為您和您的企業節省了一些寶貴的時間，請考慮捐贈以支持其維護和進一步發展。

財政支持者

非常感謝我們的資金支持！

_{菲利普·維克托·舒爾茨-克林高夫}

合作者

貢獻者

非常感謝我們所有的社區貢獻者！

_{埃斯特萬·格林}	_{馬庫斯·馬赫勒}	_特里斯坦	_爵士3e	_東尼H	_{米哈烏·斯塔維奇}
_{阿萊克斯·費雷}	_無效的	_火焰行者	_{克里斯蒂安·拉杜卡努}	_{達米安米蘭達}	_{戴恩·范德比爾特}
_{大衛桑索姆}	_{埃德加·謝爾曼}	_埃仁迪斯	_{古斯塔沃·米蘭達}	_{亨諾·勞因格}	_無效的
_{林宜比利斯}	_{讓-弗朗索瓦·塞雷}	_{喬·德科克}	_{喬馬爾·約翰尼}	_{喬納森‧柯爾伯格}	_{克里斯托夫·吉利斯}
_{梅爾羅伊·范登伯格}	_{穆罕默德·阿赫桑·阿亞茲}	_{奧維迪尤斯·斯圖卡斯}	_{雷·蘇爾澤}	_{羅伯特·帕蒂斯}	_{羅蘭‧布羅克瑪}
_{賽巴斯蒂安·威爾茲比基}	_無效的	_{斯塔斯·阿馬塞夫}	_{蒂埃里·尼謝爾維澤}	_{弗拉德·約夫}	_無效的
_無效的	_約書亞	_無效的	_無效的

如何使用？

在您的專案中安裝ngx-mat-select-search ：

 npm install ngx-mat-select-search

在您的app.module.ts中導入NgxMatSelectSearchModule例如：

 import { MatSelectModule } from '@angular/material' ;
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search' ;

@ NgModule ( {
  imports : [
    ...
    MatSelectModule ,
    NgxMatSelectSearchModule
  ] ,
} )
export class AppModule { }

透過將ngx-mat-select-search元件放置在<mat-option>元素內，可以在mat-select元素內使用 ngx-mat-select-search 元件：

 < 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) " >

 < 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 。

自訂未找到條目元素

為了自訂 no items found 元素，請將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()屬性的預設值。請參閱MatSelectSearchComponent對應@Input()屬性的文件。

例子：

 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 包

執行npm run build-lib來建立庫並產生 NPM 套件。建置工件將儲存在dist-lib/資料夾中。

要發布，請執行cd dist-lib/ && npm publish 。

運行單元測試

執行npm run test以透過 Karma 執行單元測試。

展開

ngx mat select search