react bootstrap typeahead

React ブートストラップの先行入力

React ベースの typeahead はスタイル設定に Bootstrap に依存しており、元々は Twitter の typeahead.js からインスピレーションを得たものです。単一選択と複数選択の両方をサポートし、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

このコンポーネントは主にブートストラップに依存していますが、追加のスタイル設定が必要です。提供された 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 をサポートするため、このパッケージにはTypeahead.bs5.cssという名前の CSS ファイルも含まれており、上記の基本 CSS ファイルと一緒に含める必要があります。

例

コードサンプルも含まれているライブサンプルを試してみてください。サンプルを変更したい場合は、リポジトリのクローンを作成し、 npm installとnpm startを実行してサンプル ファイルをビルドします。その後、HTML ファイルをブラウザでローカルに開くことができます。

次のサンドボックスの例を試すこともできます。

• 大規模なデータセットのウィンドウ処理
• 非同期ページネーション
• コンボボックス
• 検証とフィードバック
• カスタムローダーとクリアボタン
• 並べ替え可能なドラッグ アンド ドロップ トークンによる複数選択
• 複数選択中にメニューを開いたままにする
• フローティングラベル付きの単一選択 (BS5)

他の人にとって役立つサンプル ユースケースがある場合は、サンドボックスを作成し、プル リクエストを送信してリストに追加してください。

ブラウザのサポート

次のブラウザの最新バージョンがサポートされています。

• クロム
• Firefox
• 角
• サファリ

クロスブラウザー テストのサポートを提供してくれた BrowserStack に感謝します。

ライセンス

マサチューセッツ工科大学