react bootstrap typeahead

React Bootstrap 자동입력기

스타일링을 위해 Bootstrap을 사용하고 원래 Twitter의 typeahead.js에서 영감을 받은 React 기반 typeahead입니다. 단일 및 다중 선택을 모두 지원하며 WAI-ARIA 작성 방식을 준수합니다. 실제 사례를 사용해 보세요.

문서와 예제는 최신 릴리스에 적용되며 오래된 버전을 사용하는 경우 더 이상 적용되지 않을 수 있습니다.

설치

 npm install --save react-bootstrap-typeahead

또는

 yarn add react-bootstrap-typeahead

프로젝트에 모듈을 포함합니다.

 import { Typeahead } from 'react-bootstrap-typeahead' ; // ES2015
var Typeahead = require ( 'react-bootstrap-typeahead' ) . Typeahead ; // CommonJS 

UMD 빌드

개발 및 프로덕션 빌드는 NPM 패키지에 포함되어 있습니다. 또는 CDNJS 또는 unpkg에서 가져올 수 있습니다.

선적 서류 비치

• 기본 사용법
• 데이터
• 필터링
• 표현
• 공개 방법
• API 및 소품
• 업그레이드 가이드

CSS

구성 요소는 주로 Bootstrap에 의존하지만 몇 가지 추가 스타일이 필요합니다. 제공된 CSS 파일을 프로젝트에 포함해야 합니다.

 // Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css' ;

또는

 
< link
  rel =" stylesheet "
  href =" https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css "
/>

부트스트랩 5

Bootstrap 5를 지원하기 위한 노력의 일환으로 이 패키지에는 위의 기본 CSS 파일과 함께 포함되어야 하는 Typeahead.bs5.css 라는 CSS 파일도 포함되어 있습니다.

예

코드 샘플도 포함된 실제 예제를 사용해 보세요. 예제를 수정하려면 저장소를 복제하고 npm install 및 npm start 실행하여 예제 파일을 빌드하세요. 그런 다음 브라우저에서 로컬로 HTML 파일을 열 수 있습니다.

다음 샌드박스 예제를 시도해 볼 수도 있습니다.

• 대규모 데이터 세트를 사용한 윈도우화
• 비동기 페이지 매김
• 콤보박스
• 검증 및 피드백
• 커스텀 로더 및 클리어 버튼
• 재정렬 가능한 드래그 앤 드롭 토큰으로 다중 선택
• 다중 선택 중에 메뉴를 열어두기
• 플로팅 라벨을 사용한 단일 선택(BS5)

다른 사람들에게 유용할 수 있는 예시 사용 사례가 있다면 샌드박스를 생성하고 풀 요청을 제출하여 목록에 추가하세요!

브라우저 지원

다음 브라우저의 최신 버전이 지원됩니다.

• 크롬
• 파이어폭스
• 가장자리
• 원정 여행

크로스 브라우저 테스트 지원을 제공한 BrowserStack에 특별히 감사드립니다.

특허

MIT