material ui search bar

Bilah Pencarian Bahan

Lihat komponen ini beraksi

Instalasi

npm i --save material-ui-search-bar

Catatan: Jika Anda masih menggunakan Material-UI v3, silakan instal v0.x pada bilah pencarian menggunakan npm i --save material-ui-search-bar@beta

Penggunaan

SearchBar adalah input yang dikontrol , artinya Anda harus mempertahankan status input. Hal ini memberikan banyak fleksibilitas, misalnya Anda dapat mengubah dan menghapus input pencarian hanya dengan mengubah propsnya.

 import SearchBar from "material-ui-search-bar" ;
// *snip*

return (
  < SearchBar
    value = { this . state . value }
    onChange = { ( newValue ) => this . setState ( { value : newValue } ) }
    onRequestSearch = { ( ) => doSomethingWith ( this . state . value ) }
  / >
) ;

Properti Bilah Pencarian

Nama	Jenis	Bawaan	Keterangan
batalkanOnEscape	bool		Apakah akan menghapus pencarian saat melarikan diri
kelas*	object		Ganti atau perluas gaya yang diterapkan pada komponen.
nama kelas	string	''	Kelas tingkat atas khusus
tutupIkon	node	<ClearIcon style={{ color: grey[500] }} />	Ganti ikon tutup.
dengan disabilitas	bool	false	Menonaktifkan bidang teks.
pada CancelSearch	func		Dipecat ketika pencarian dibatalkan.
di Perubahan	func		Diaktifkan ketika nilai teks berubah.
diRequestSearch	func		Diaktifkan ketika ikon pencarian diklik.
pengganti	string	'Search'	Menetapkan teks placeholder untuk bidang teks yang disematkan.
ikon pencarian	node	<SearchIcon style={{ color: grey[500] }} />	Ganti ikon pencarian.
gaya	object	null	Ganti gaya sebaris elemen akar.
nilai	string	''	Nilai bidang teks.

* properti yang dibutuhkan

Properti lain yang disediakan akan disebarkan ke komponen Input yang mendasarinya.

Lisensi

File yang disertakan dalam repositori ini dilisensikan di bawah lisensi MIT.