ดาวน์โหลด material ui search bar - material ui search bar ดาวน์โหลดซอร์สโค้ด

material ui search bar

ซอร์สโค้ดอื่น ๆ

v1.0.0

ดาวน์โหลด

แถบค้นหาวัสดุ

ตัวอย่าง

ดูส่วนประกอบนี้ในการดำเนินการ

การติดตั้ง

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

หมายเหตุ: หากคุณยังคงใช้ Material-UI v3 อยู่ โปรดติดตั้ง v0.x ของแถบค้นหาโดยใช้ npm i --save material-ui-search-bar@beta

การใช้งาน

SearchBar เป็น อินพุตที่มีการควบคุม ซึ่งหมายความว่า คุณ ต้องคงสถานะอินพุตไว้ ซึ่งช่วยให้มีความยืดหยุ่นมาก เช่น คุณสามารถเปลี่ยนและล้างข้อมูลการค้นหาได้โดยการเปลี่ยนอุปกรณ์ประกอบฉาก

 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 ) }
  / >
) ;

คุณสมบัติแถบค้นหา

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ยกเลิกOnEscape	`bool`		ไม่ว่าจะล้างการค้นหาในการหลบหนี
ชั้นเรียน*	`object`		แทนที่หรือขยายสไตล์ที่ใช้กับส่วนประกอบ
ชื่อคลาส	`string`	`''`	คลาสระดับบนสุดที่กำหนดเอง
ปิดไอคอน	`node`	`<ClearIcon style={{ color: grey[500] }} />`	แทนที่ไอคอนปิด
พิการ	`bool`	`false`	ปิดการใช้งานช่องข้อความ
บนยกเลิกการค้นหา	`func`		เริ่มทำงานเมื่อการค้นหาถูกยกเลิก
เมื่อเปลี่ยน	`func`		เริ่มทำงานเมื่อค่าข้อความเปลี่ยนแปลง
onRequestSearch	`func`		เริ่มทำงานเมื่อมีการคลิกไอคอนค้นหา
ตัวยึดตำแหน่ง	`string`	`'Search'`	ตั้งค่าข้อความตัวแทนสำหรับช่องข้อความที่ฝัง
ค้นหาไอคอน	`node`	`<SearchIcon style={{ color: grey[500] }} />`	แทนที่ไอคอนการค้นหา
สไตล์	`object`	`null`	แทนที่รูปแบบอินไลน์ขององค์ประกอบราก
ค่า	`string`	`''`	ค่าของช่องข้อความ