react bootstrap typeahead Download - react bootstrap typeahead Quellcode herunterladen

react bootstrap typeahead

Anderer Quellcode

v6.3.2

Herunterladen

Reagieren Sie mit Bootstrap Typeahead

Ein React-basierter Typeahead, der für das Styling auf Bootstrap setzt und ursprünglich von typeahead.js von Twitter inspiriert wurde. Es unterstützt sowohl Einzel- als auch Mehrfachauswahl und ist mit den WAI-ARIA-Authoring-Praktiken kompatibel. Probieren Sie die Live-Beispiele aus.

Bitte beachten Sie, dass Dokumentation und Beispiele für die neueste Version gelten und möglicherweise nicht mehr anwendbar sind, wenn Sie eine veraltete Version verwenden.

Installation

 npm install --save react-bootstrap-typeahead

oder

 yarn add react-bootstrap-typeahead

Binden Sie das Modul in Ihr Projekt ein:

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

UMD-Build

Entwicklungs- und Produktions-Builds sind im NPM-Paket enthalten. Alternativ können Sie sie von CDNJS oder unpkg beziehen.

Dokumentation

Grundlegende Verwendung
Daten
Filtern
Rendern
Öffentliche Methoden
API & Requisiten
Upgrade-Anleitung

CSS

Während die Komponente in erster Linie auf Bootstrap basiert, ist ein gewisses zusätzliches Styling erforderlich. Sie sollten die bereitgestellte CSS-Datei in Ihr Projekt einbinden:

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

oder

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

Bootstrap 5

Um Bootstrap 5 zu unterstützen, enthält dieses Paket auch eine CSS-Datei namens Typeahead.bs5.css , die neben der oben genannten Basis-CSS-Datei enthalten sein sollte.

Beispiele

Probieren Sie die Live-Beispiele aus, die auch Codebeispiele enthalten. Wenn Sie die Beispiele ändern möchten, klonen Sie das Repository und führen Sie npm install und npm start aus, um die Beispieldatei zu erstellen. Anschließend können Sie die HTML-Datei lokal in Ihrem Browser öffnen.

Sie können auch die folgenden Sandbox-Beispiele ausprobieren:

Fensterung mit großen Datenmengen
Asynchrone Paginierung
Combobox
Validierung und Feedback
Benutzerdefinierter Lader und Löschtaste
Mehrfachauswahl mit neu anordnbaren Drag & Drop-Tokens
Lassen Sie das Menü während der Mehrfachauswahl geöffnet
Einzelauswahl mit schwebender Beschriftung (BS5)

Wenn Sie einen Beispielanwendungsfall haben, der für andere nützlich wäre, erstellen Sie bitte eine Sandbox und senden Sie eine Pull-Anfrage, um ihn der Liste hinzuzufügen!