material ui search bar

재료 검색창

이 구성 요소의 실제 작동 모습을 확인하세요

설치

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

참고: 아직 Material-UI v3를 사용하고 있다면 npm i --save material-ui-search-bar@beta 사용하여 검색 창 v0.x를 설치하세요.

용법

SearchBar 는 제어된 입력 이므로 입력 상태를 유지 해야 합니다. 이는 많은 유연성을 허용합니다. 예를 들어 props를 변경하여 검색 입력을 변경하고 지울 수 있습니다.

 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	''	사용자 정의 최상위 클래스
닫기아이콘	node	<ClearIcon style={{ color: grey[500] }} />	닫기 아이콘을 재정의합니다.
장애가 있는	bool	false	텍스트 필드를 비활성화합니다.
onCancelSearch	func		검색이 취소되면 시작됩니다.
변경 시	func		텍스트 값이 변경되면 시작됩니다.
onRequestSearch	func		검색 아이콘을 클릭하면 시작됩니다.
자리 표시자	string	'Search'	포함된 텍스트 필드에 대한 자리 표시자 텍스트를 설정합니다.
검색아이콘	node	<SearchIcon style={{ color: grey[500] }} />	검색 아이콘을 재정의합니다.
스타일	object	null	루트 요소의 인라인 스타일을 재정의합니다.
값	string	''	텍스트 필드의 값입니다.

* 필수 속성

제공된 다른 모든 속성은 기본 Input 구성 요소로 확산됩니다.

특허

이 저장소에 포함된 파일은 MIT 라이선스에 따라 라이선스가 부여됩니다.