react bootstrap typeahead Télécharger - react bootstrap typeahead Téléchargement du code source

react bootstrap typeahead

Autre code source

v6.3.2

Télécharger

Réagir à la saisie anticipée Bootstrap

Une tête de frappe basée sur React qui s'appuie sur Bootstrap pour le style et a été initialement inspirée par typeahead.js de Twitter. Il prend en charge la sélection unique et multiple et est conforme aux pratiques de création WAI-ARIA. Essayez les exemples en direct.

Veuillez noter que la documentation et les exemples s'appliquent à la version la plus récente et peuvent ne plus être applicables si vous utilisez une version obsolète.

Installation

 npm install --save react-bootstrap-typeahead

ou

 yarn add react-bootstrap-typeahead

Incluez le module dans votre projet :

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

Construction UMD

Les versions de développement et de production sont incluses dans le package NPM. Alternativement, vous pouvez les obtenir auprès de CDNJS ou unpkg.

Documentation

Utilisation de base
Données
Filtration
Rendu
Méthodes publiques
API et accessoires
Guide de mise à niveau

CSS

Bien que le composant repose principalement sur Bootstrap, un style supplémentaire est nécessaire. Vous devez inclure le fichier CSS fourni dans votre projet :

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

ou

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

Amorçage 5

Dans le but de prendre en charge Bootstrap 5, ce package contient également un fichier CSS nommé Typeahead.bs5.css qui doit être inclus avec le fichier CSS de base ci-dessus.

Exemples

Essayez les exemples en direct, qui incluent également des exemples de code. Si vous souhaitez modifier les exemples, clonez le référentiel et exécutez npm install et npm start pour créer le fichier d'exemple. Vous pouvez ensuite ouvrir le fichier HTML localement dans votre navigateur.

Vous pouvez également essayer les exemples de sandbox suivants :

Fenêtrage avec de grands ensembles de données
Pagination asynchrone
Liste déroulante
Validation et commentaires
Chargeur personnalisé et bouton d'effacement
Sélection multiple avec jetons glisser-déposer réorganisables
Garder le menu ouvert pendant la multi-sélection
Sélection unique avec étiquette flottante (BS5)

Si vous avez un exemple de cas d'utilisation qui pourrait être utile à d'autres, veuillez créer un bac à sable et soumettre une pull request pour l'ajouter à la liste !