تنزيل 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، فيرجى تثبيت الإصدار 0.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 ) }
  / >
) ;

خصائص شريط البحث

اسم	يكتب	تقصير	وصف
CancelOnEscape	`bool`		ما إذا كان سيتم مسح البحث عند الهروب
الطبقات*	`object`		تجاوز أو توسيع الأنماط المطبقة على المكون.
اسم الفئة	`string`	`''`	فئة المستوى الأعلى المخصصة
CloseIcon	`node`	`<ClearIcon style={{ color: grey[500] }} />`	تجاوز رمز الإغلاق.
عاجز	`bool`	`false`	تعطيل حقل النص.
onCancelSearch	`func`		يتم إطلاقه عند إلغاء البحث.
onChange	`func`		يتم إطلاقه عندما تتغير قيمة النص.
onRequestSearch	`func`		يتم تشغيله عند النقر على أيقونة البحث.
العنصر النائب	`string`	`'Search'`	يضبط نص العنصر النائب لحقل النص المضمن.
searchIcon	`node`	`<SearchIcon style={{ color: grey[500] }} />`	تجاوز أيقونة البحث.
أسلوب	`object`	`null`	تجاوز الأنماط المضمنة للعنصر الجذر.
قيمة	`string`	`''`	قيمة حقل النص.