Creazione di popover, avvisi e toast con l'interfaccia utente Blueprint in React

Blueprint UI è un popolare toolkit dell'interfaccia utente di React che fornisce una serie di componenti e stili riutilizzabili per la creazione di applicazioni Web moderne. Una delle caratteristiche principali dell'interfaccia utente di Blueprint è il supporto per la creazione di popover, avvisi e toast, che sono componenti essenziali per la visualizzazione di informazioni e feedback per gli utenti.

Installazione dell'interfaccia utente di Blueprint

Per iniziare con Blueprint UI, devi prima installarlo. Puoi farlo utilizzando qualsiasi gestore di pacchetti di tua scelta.

Per installarlo usando npm, il gestore di pacchetti JavaScript, esegui il seguente comando nel tuo terminale:

npm installa @blueprintjs/core

Dopo aver installato Blueprint UI, devi importare i file CSS dalla libreria:

@importare"normalizzare.css";
@importare"@blueprintjs/core/lib/css/blueprint.css";
@importare"@blueprintjs/icons/lib/css/blueprint-icons.css";

Importando questi file, sarai in grado di integrare gli stili dell'interfaccia utente di Blueprint con i componenti offerti dall'interfaccia utente di Blueprint.

Creazione di popover utilizzando l'interfaccia utente di Blueprint

I popover sono suggerimenti che vengono visualizzati quando l'utente passa il mouse sopra o fa clic su un elemento. Forniscono informazioni o opzioni aggiuntive all'utente.

Per creare popover nella tua applicazione React utilizzando l'interfaccia utente Blueprint, devi installare l'interfaccia utente Blueprint Popover2 componente.

Per fare ciò, esegui il seguente codice nel tuo terminale:

npm install --save @blueprintjs/popover2

Assicurati di importare il foglio di stile del pacchetto nel tuo file CSS:

@importare"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Dopo aver importato il foglio di stile, puoi utilizzare il file Popover2 componente per creare popover nella tua applicazione.

Per esempio:

importare Reagire da"reagire";
importare { Pulsante } da"@blueprintjs/core";
importare { Popover2 } da"@blueprintjs/popover2";
funzioneApp() {
cost popoverContenuto = (



Titolo popover</h3>


Questo è il contenuto all'interno del popover.</p>
 </div>
 );
ritorno (




"successo" testo="Cliccami" />
 </Popover2>
 </div>
 );
}

esportarepredefinito Applicazione;

Questo codice crea un popover utilizzando il file Popover2 componente. Definisce anche a popoverContent variabile, che contiene il codice JSX per il contenuto del popover.

IL Popover2 componente prende il popoverContent come il suo valore contenuto puntello. IL contenuto prop specifica il contenuto visualizzato all'interno del popover. Ecco, il Popover2 avvolge il componente a Pulsante componente. Ciò fa sì che il popover venga visualizzato quando si fa clic sul pulsante.

Il popover sembra semplice, come mostrato qui:

Puoi modellare il contenuto del popover passando a nome della classe prop al popoverContent Codice JSX:

cost popoverContenuto = (
'popover'>
Titolo popover</h3>


Questo è il contenuto all'interno del popover.</p>
 </div>
);

È quindi possibile definire la classe CSS nel file CSS:

.popover {
imbottitura: 1rem;
colore di sfondo: #e2e2e2;
famiglia di font: corsivo;
}

Ora il popover dovrebbe apparire un po' meglio:

IL Popover2 component richiede alcuni oggetti di scena che ti aiuteranno a configurarlo in base alle tue esigenze. Alcuni di questi oggetti di scena lo sono popoverNomeClasse, onInteraction, è aperto, minimo, E posizionamento.

IL posizionamento prop determina la posizione preferita del popover rispetto all'elemento di destinazione. I suoi valori disponibili sono:

• auto
• avvio automatico
• fine automatica
• superiore
• top-start
• di fascia alta
• metter il fondo a
• partenza dal basso
• estremità inferiore
• Giusto
• giusto inizio
• estremità destra
• Sinistra
• partenza a sinistra
• sinistra

Con il popoverNomeClasse, puoi definire un nome di classe CSS per l'elemento popover. Per prima cosa creerai una classe CSS nel tuo file CSS per usare il prop.

Per esempio:

.popover personalizzato {
colore di sfondo: #e2e2e2;
scatola-ombra: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
bordo-raggio: 12px;
imbottitura: 1rem;
}

Dopo aver creato la classe CSS, usa il file popoverNomeClasse prop per applicare lo stile personalizzato al componente Popover2:

 contenuto={popoverContenuto}
 posizionamento="estremità inferiore"
 popoverNomeClasse="popover personalizzato"
 minimo={VERO}
>
"successo" testo="Cliccami" />
</Popover2>

IL minimo prop controlla lo stile del popover. Il prop accetta un valore booleano. Se impostato su true, il popover avrà uno stile minimo, nessuna freccia e un semplice aspetto a forma di riquadro.

Creazione di avvisi

Gli avvisi sono notifiche che appaiono sullo schermo per informare l'utente di informazioni o azioni importanti. Sono comunemente usati per visualizzare messaggi di errore, messaggi di successo o avvisi.

La creazione di avvisi nell'interfaccia utente di Blueprint è simile a creazione di avvisi utilizzando l'interfaccia utente di Chakra. Utilizzerai il componente Alert per creare un avviso nella tua applicazione React utilizzando l'interfaccia utente Blueprint.

Ecco un esempio:

importare Reagire da"reagire";
importare { Avviso, pulsante } da"@blueprintjs/core";
funzioneApp() {
cost [isOpen, setIsOpen] = React.useState(falso);
cost manigliaAperto = () => {
 setIsOpen(VERO);
 };
cost manigliaChiudi = () => {
 setIsOpen(falso);
 };
ritorno (



"Vicino">
Questo è un messaggio di avviso</p>
 </Alert>
"Cliccami" intento="successo" onClick={handleOpen} />
 </div>
 );
}
esportarepredefinito Applicazione;

Questo esempio mostra come importare il file Mettere in guardia componente dal @blueprintjs/core pacchetto. IL Mettere in guardia componente esegue il rendering di un messaggio di avviso sullo schermo. Ci vogliono anche tre oggetti di scena: è aperto, suChiudi, E confirmButtonText.

IL è aperto prop determina se l'avviso è visibile o meno. Impostalo su true per visualizzare l'avviso e false per nasconderlo. IL suChiudi prop è una funzione di callback che viene eseguita quando un utente chiude l'avviso.

Infine il confirmButtonText prop determina il testo visualizzato sul pulsante di conferma.

La notifica di avviso in questo esempio sarà simile a questa:

Creazione di brindisi con l'interfaccia utente Blueprint

I toast sono notifiche che appaiono sullo schermo per informare l'utente di informazioni o eventi importanti. Sono simili agli avvisi ma in genere sono meno invadenti e scompaiono rapidamente.

Per creare un brindisi nella tua applicazione React utilizzando l'interfaccia utente Blueprint, usa il file OverlayTostapane componente. IL OverlayTostapane componente crea un'istanza Toaster che viene quindi utilizzata per creare singoli toast.

Per esempio:

importare Reagire da"reagire";
importare { OverlayToaster, Pulsante } da"@blueprintjs/core";
cost tostapaneInstance = OverlayToaster.create({ posizione: "in alto a destra" });
funzioneApp() {
cost mostraToast = () => {
 tostapaneInstance.show({
 Messaggio: "Questo è un brindisi",
 intento: "primario",
 tempo scaduto: 3000,
 isCloseButtonMostrato: falso,
 icona: "segnalibro",
 });
 };
ritorno (



"Cliccami" intento="successo" onClick={showToast} />
 </div>
 );
}
esportarepredefinito Applicazione;

Il blocco di codice sopra utilizza il file OverlayToaster.create metodo per generare l'istanza del tostapane e specifica la sua posizione utilizzando il posizione puntello.

Definisce anche la funzione showToast. Questa funzione utilizza il spettacolo metodo del tostapaneInstance per visualizzare il brindisi quando chiamato. IL spettacolo metodo prende un oggetto con il Messaggio, intento, tempo scaduto, isCloseButtonmostrato, E icona oggetti di scena.

IL Messaggio prop specifica il contenuto testuale del brindisi, mentre il intento prop specifica il tipo di brindisi. Lo stile del brindisi varierà in base al suo valore.

Puoi controllare per quanto tempo viene visualizzata la notifica di avviso popup utilizzando il tempo scaduto puntello. IL icona prop specifica un elemento icona da visualizzare nel brindisi. Con il isCloseButtonmostrato prop, puoi controllare se il pulsante di chiusura viene visualizzato nell'avviso.

Il blocco di codice sopra genererà un bellissimo brindisi quando fai clic sul pulsante, come mostrato nell'immagine qui sotto.

Se stai cercando di creare attraenti notifiche di brindisi nella tua applicazione React, l'interfaccia utente Blueprint è un'ottima opzione. Fornisce un'ampia gamma di componenti predefiniti che puoi utilizzare per creare notifiche che corrispondono allo stile della tua applicazione.

Tuttavia, se stai lavorando a un piccolo progetto che non richiede tutte le funzionalità dell'interfaccia utente di Blueprint, React Toastify è un'alternativa leggera alla creazione di bellissime notifiche.

Miglioramento dell'esperienza utente con toast, popover e avvisi

Hai imparato come creare popover, avvisi e toast nella tua applicazione React utilizzando l'interfaccia utente Blueprint. Questi componenti sono essenziali per fornire informazioni e feedback agli utenti e possono migliorare in modo significativo l'esperienza utente della tua applicazione. Puoi facilmente creare questi componenti utilizzando le informazioni che hai ottenuto con il minimo sforzo e personalizzazione.