ng mat search bar

NgMatSearchBar

ส่วนประกอบจะสร้างไอคอนค้นหาซึ่งจะขยายช่องค้นหาเมื่อคลิก ดูการสาธิตสำหรับเอฟเฟกต์:

การติดตั้ง

ติดตั้งการพึ่งพาผ่าน npm:

npm install ng-mat-search-bar --save

หรือเส้นด้าย

yarn add ng-mat-search-bar

และนำเข้าโมดูลไปยังแอปของคุณ app.module.ts ดังนี้:

 import { NgMatSearchBarModule } from 'ng-mat-search-bar' ;

...

@ NgModule ( {
  ... ,
  imports : [
    ... ,
    NgMatSearchBarModule
  ] ,
  ...
} )

ตรวจสอบให้แน่ใจว่าใน app.module.ts ของคุณคุณนำเข้า BrowserAnimationsModule มิฉะนั้นภาพเคลื่อนไหวจะไม่ทำงาน!

คุณต้องเพิ่ม webfont ของไอคอนวัสดุด้วยการเพิ่ม

 < link
  href =" https://fonts.googleapis.com/icon?family=Material+Icons "
  rel =" stylesheet "
/>

ไปที่ของคุณ index.html

การใช้งาน

คุณสามารถใช้ส่วนประกอบด้วยตัวเลือก:

 <mat-search-bar></mat-search-bar>

กิจกรรม

คุณสามารถสมัครรับเหตุการณ์ต่างๆ ที่คอมโพเนนต์กำลังส่งออกได้:

• onBlur : เริ่มทำงานเมื่อช่องค้นหาหลุดโฟกัส
• onClose : เริ่มทำงานเมื่อผู้ใช้ปิดช่องค้นหาโดยคลิกปุ่มปิด
• onEnter : เริ่มทำงานเมื่อผู้ใช้กดปุ่ม Enter ในช่องค้นหา
• onFocus : เริ่มทำงานเมื่อผู้ใช้โฟกัสไปที่ช่องค้นหา
• onOpen : เริ่มทำงานเมื่อแถบค้นหาปรากฏขึ้น

วิธีการและคุณสมบัติ

นอกจากนี้ยังมีวิธีสาธารณะสองวิธีในการเปิด / ปิดแถบค้นหา:

• open() : เปิดแถบค้นหา
• close() : ปิดแถบค้นหา

และทรัพย์สิน:

• searchVisible : ซึ่งเก็บสถานะการมองเห็นปัจจุบันของอินพุตการค้นหา

แบบฟอร์มปฏิกิริยา

คุณสามารถใช้มันกับ ReactiveFormsModule โดยส่ง FormControl เป็นอินพุต: เช่น

...
< mat-search-bar [formControl] =" control " > </ mat-search-bar >
...

และในไฟล์ .ts:

  ...@ Component ( { } ) ...
    control: FormControl = new FormControl ( '' ) ;
  ...

เติมข้อความอัตโนมัติ

คุณยังสามารถใช้ร่วมกับการเติมข้อความอัตโนมัติของ Angular Materials ได้ (https://material.angular.io/components/autocomplete/overview) เพียงใช้มันตามที่อธิบายไว้ในเอกสาร Angular และใช้ mat-search-bar เป็นอินพุต นอกจากนี้คุณสามารถตรวจสอบ app.component.html/.ts สำหรับโค้ดตัวอย่าง: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/

ผลงาน

โปรดอย่าลังเลที่จะยื่นปัญหาหรือส่ง PR หากคุณมีการปรับปรุงหรือพบข้อบกพร่อง