Bestätigungsdialog für Reagieren mit Bootstrap Modal

Blog

Bestätigungsdialog für Reagieren mit Bootstrap Modal

Bootstrap-Dialog reagieren

Die React-Komponentenbibliothek für ein Warnung oder Dialog beyogen auf reagieren-bootstrap 's |_+_| . Konfigurierbare und einfache Verwendung anstelle von |_+_|, |_+_| oder |_+_| in Ihrer React-Anwendung.



Das ist der Bildtitel

Sie können mit React-Bootstrap v3 oder v4 verwenden. (v4 seit React-Bootstrap-Dialog v0.11.0)



Screenshots

Standardwarnung Standarddialog
Alternative für |_+_| Alternative für |_+_|
Das ist der Bildtitel Das ist der Bildtitel
Textaufforderung Passwortabfrage
Alternative für |_+_| Einfache Passworteingabe
Das ist der Bildtitel Das ist der Bildtitel

Demo

Verwendungszweck

Installieren

oder

window.alert

Schnellstart

Schritt 1. Paket importieren.



window.confirm

Schritt 2. Schreiben Sie jsx in |_+_| Methode.

window.prompt

Schritt 3. Rufen Sie |_+_| . an Methode oder |_+_| Methode.

window.alert

Vollständige Probe:

window.confirm

Unterlagen

Index:

source-shell yarn add react-bootstrap-dialog

setOptions(Optionen)

Legen Sie Standardoptionen für die Anwendung auf alle Dialogfelder fest

  • |_+_|: [Object] Die Parameter für Standardoptionen.
    • |_+_|: [String, Node] Die Standardbezeichnung für die Schaltfläche OK. Standard ist |_+_|.
    • |_+_|: [String, Node] Die Standardbezeichnung für die Schaltfläche Abbrechen. Standard ist |_+_|.
    • |_+_|: [String] Der Klassenname für die primäre Schaltfläche. Standard ist |_+_|
    • |_+_|: [String] Der Klassenname für die normale Schaltfläche. Standard ist |_+_|
      • Hinweis: Der Standardwert umfasst die Klassen v3 und v4.
Beispiel
source-js import Dialog from 'react-bootstrap-dialog'
Optionen zurücksetzen ()

Standardoptionen auf Voreinstellungen zurücksetzen.

Beispiel
render

text-html-basic { this.dialog = el }} />

anzeigen(Optionen)

Dialog mit Auswahlmöglichkeiten anzeigen. Dies ist ähnlich zu |_+_|.

  • |_+_|: [Objekt] Die Parameter für Optionen.
    • |_+_|: [String, Node] Der Titel des Dialogs.
    • |_+_|: [String, Node] Der Nachrichtentext.
    • |_+_|: [Array[DialogAction]] Die Auswahlmöglichkeiten für die Präsentation für den Benutzer. Sehen DialogAction-Generatoren .
    • |_+_|: [String] Die Breite für den Dialog.
      • mit React-Bootstrap v3: Sie können wählen zwischen [null, ‘medium’, ‘large’, ‘small’].
      • mit React-Bootstrap v4: Sie können wählen zwischen [null, ‚medium‘, ‚lg‘, ‚sm‘].
    • |_+_|: [Funktion] Die Methode, die aufgerufen wird, wenn der Dialog durch Klicken auf den Hintergrund geschlossen wurde.
    • |_+_|: [DialogPrompt] Die Aufforderung zum Abrufen von Benutzereingaben. Sehen DialogPrompt-Generatoren .
Beispiel
showAlert
showAlert(body, bsSize = undefined)

Meldungsdialog anzeigen Dies ist ähnlich zu |_+_|.

  • |_+_|: [String, Node] Der Nachrichtentext.
  • |_+_|: [String] Die Breite für den Dialog. Sie können wählen zwischen [null, ‘medium’, ‘large’, ‘small’].
Beispiel
show
verstecken()

Dieses Dialogfeld ausblenden.

Beispiel
source-js this.dialog.showAlert('Hello Dialog!')

|_+_| Generatoren

Dialog.Action(label, func, className)

Die maßgeschneiderte Wahl für |_+_| in |_+_|.

  • |_+_|: [String, Node] Das Label für die Schaltfläche.
  • |_+_|: [Funktion] Die Methode, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird.
  • |_+_|: Der Klassenname für die Schaltfläche.
Beispiel
source-js import React from 'react' import {Button} from 'react-bootstrap' import Dialog from 'react-bootstrap-dialog' export default class SampleCode extends React.Component { constructor () { super() this.onClick = this.onClick.bind(this) } onClick () { this.dialog.showAlert('Hello Dialog!') } render () { return ( Show alert { this.dialog = component }} /> ) } }
Dialog.DefaultAction(label, func, className)

Die Standardauswahl für |_+_| in |_+_|.

  • |_+_|: [String, Node] Das Label für die Schaltfläche.
  • |_+_|: [Funktion] Die Methode, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird.
  • |_+_|: Der Klassenname für die Schaltfläche. (Standard ist |_+_|)
Beispiel
Dialog
Dialog.OKAktion (Funktion)

Die richtige Wahl für |_+_| in |_+_|. Es verwendet das Standard-OK-Label (|_+_|) und die Standard-Primärklasse (|_+_|).

  • |_+_|: [Funktion] Die Methode, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird.
Beispiel
Dialog.CancelAction(func)

Die Option Abbrechen für |_+_| in |_+_|. Es verwendet das standardmäßige Abbruchlabel (|_+_|).

  • |_+_|: [Funktion] Die Methode, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird.
Beispiel 1
DialogAction
Beispiel 2
DialogPrompt

|_+_| Generatoren

Dialog.TextPrompt(Optionen = {})

Die Eingabeaufforderungseinstellungen zum Anzeigen der Texteingabe für |_+_| in |_+_|.

  • |_+_|: [Objekt] Die Parameter für Optionen.
    • |_+_|: [String] Der Anfangswert für die Eingabeaufforderung.
    • |_+_|: [String] Der Platzhalter für die Eingabeaufforderung.
    • |_+_|: [Boolean] Bei true wird das Schließen des Dialogs ohne Eingabe des Textwerts verhindert.
Beispiel
Dialog
Dialog.PasswordPrompt(Optionen = {})

Die Eingabeaufforderungseinstellungen zum Anzeigen der Passworteingabe für |_+_| in |_+_|.

  • |_+_|: [Objekt] Die Parameter für Optionen.
    • |_+_|: [String] Der Anfangswert für die Eingabeaufforderung.
    • |_+_|: [String] Der Platzhalter für die Eingabeaufforderung.
    • |_+_|: [Boolean] Bei true wird das Schließen des Dialogs ohne Eingabe des Passwortwerts verhindert.
Beispiel
options

#reactjs #javascript