Usa la libreria Blueprint e non farai mai più fatica a produrre un sito web attraente e accessibile.
La creazione di un'applicazione React da zero può essere un'attività impegnativa e dispendiosa in termini di tempo, soprattutto quando si tratta di componenti di stile. È qui che torna utile Blueprint UI Toolkit. Il toolkit è un insieme di componenti dell'interfaccia utente riutilizzabili che possono aiutarti a creare interfacce coerenti e visivamente accattivanti per le tue applicazioni React.
Scopri le nozioni di base del Blueprint UI Toolkit e come utilizzarlo per creare una semplice applicazione React.
Blueprint UI Toolkit è un Libreria di componenti dell'interfaccia utente di React. Contiene una raccolta di componenti predefiniti facili da usare e personalizzare. È possibile utilizzare questi componenti predefiniti pronti all'uso o modificarli per adattarli alle proprie esigenze specifiche.
I componenti di Blueprint UI Toolkit includono pulsanti, moduli, modali, navigazione e tabelle. L'utilizzo di questi componenti può farti risparmiare tempo e fatica poiché non devi progettare e costruire ogni componente da zero.
Per iniziare con Blueprint UI Toolkit, è necessario creare un'applicazione React.
Una volta impostato il progetto, puoi installare Blueprint UI Toolkit utilizzando qualsiasi programma di installazione del pacchetto Node di tua scelta. Per installare Blueprint UI Toolkit utilizzando npm, esegui il seguente comando nel tuo terminale:
npm installa @blueprintjs/core
Per usare invece il filato, esegui questo comando:
filato aggiungere @blueprintjs/core
Dopo aver installato Blueprint UI Toolkit, puoi utilizzare i componenti di tua scelta nella tua applicazione React.
Prima di utilizzare i componenti, includi i file CSS da Blueprint UI Toolkit:
@importare"normalizzare.css";
@importare"@blueprintjs/core/lib/css/blueprint.css";
@importare"@blueprintjs/icons/lib/css/blueprint-icons.css";
L'aggiunta del blocco di codice sopra al tuo file CSS applica gli stili dell'interfaccia utente Blueprint ai suoi componenti.
Ad esempio, per aggiungere un pulsante alla tua applicazione, utilizza il file Pulsante componente da Blueprint UI Toolkit:
importare Reagire da"reagire";
importare { Pulsante } da"@blueprintjs/core";funzioneApp() {
ritorno (
esportarepredefinito Applicazione;
Questo blocco di codice aggiunge un pulsante alla tua applicazione utilizzando il Pulsante componente. IL Pulsante componente prende oggetti di scena come intento, testo, icona, piccolo, E grande.
IL intento prop definisce la natura del pulsante, che si riflette nel suo colore di sfondo. In questo esempio, il pulsante ha un successo intento che gli conferisce un colore di sfondo verde. L'interfaccia utente di Blueprint offre diversi intenti principali tra cui primario (blu), successo (verde), avvertimento (arancione) e Pericolo (rosso).
È possibile specificare il testo che appare all'interno del pulsante con il testo puntello. Puoi anche aggiungere icone al pulsante usando il icona puntello. Accanto al icona prop è il rightIcon prop, che aggiunge l'icona sul lato destro del pulsante.
Infine il grande E piccolo oggetti di scena booleani specificano la dimensione del pulsante. IL grande prop rende il pulsante più grande, mentre il piccolo prop lo rende più piccolo.
Il blocco di codice precedente genererà un pulsante simile a questo:
Puoi anche usare il Pulsante di ancoraggio componente per creare un pulsante nella tua applicazione. IL Pulsante di ancoraggio component è una versione specializzata del componente Button progettato esplicitamente per essere utilizzato come collegamento.
Questo componente accetta molti degli stessi oggetti di scena del componente Button, incluso testo, grande, piccolo, intento, E icona. Accetta anche il href E bersaglio oggetti di scena.
IL href prop specifica l'URL a cui si collega il pulsante e il file bersaglio prop specifica la finestra o frame di destinazione per il collegamento:
importare Reagire da"reagire";
importare {Pulsante di ancoraggio} da"@blueprintjs/core";funzioneApp() {
ritorno (
href=" https://example.com/"
intento="primario"
testo="Cliccami"
bersaglio="_vuoto"
/>
</div>
);
}
esportarepredefinito Applicazione;
Questo blocco di codice sopra esegue il rendering di un file Pulsante di ancoraggio componente. I componenti href il valore prop è " https://example.com/” e il bersaglio prop value è "_blank", il che significa che il collegamento si aprirà in un'altra scheda o finestra del browser.
Un altro componente essenziale del Blueprint UI Toolkit è il Carta componente. Si tratta di un componente riutilizzabile che visualizza le informazioni in modo visivo accattivante.
Il componente Card prende due oggetti di scena interattivo E elevazione. IL elevazione prop controlla la profondità dell'ombra della carta, con valori più alti che producono un effetto ombra più prominente.
IL interattivo prop accetta un valore booleano. Se impostato su true, abilita le interazioni al passaggio del mouse e al clic sulla scheda, consentendole di rispondere all'input dell'utente.
Per esempio:
importare Reagire da"reagire";
importare { Carta, Elevazione } da"@blueprintjs/core";funzioneApp() {
ritorno (VERO} elevazione={Elevazione. DUE}> Questa è una Carta</h2>
Questo è un contenuto In la mia carta</p>
</Card>
</div>
);
}
esportarepredefinito Applicazione;
In questo esempio, il Carta componente ha un titolo e alcuni contenuti. IL interattivo prop è impostato su VERO.
Importi anche il file Elevazione componente da @blueprintjs/core. IL Elevazione component è un'enumerazione che definisce un insieme di valori predefiniti che è possibile utilizzare per impostare la profondità dell'ombra di un componente.
Ecco i valori disponibili del Elevazione enum:
- Elevazione. ZERO: Questo valore imposta la profondità dell'ombra su 0, indicando che il componente non ha alcuna ombra applicata
- Elevazione. UNO: Questo valore imposta la profondità dell'ombra su 1.
- Elevazione. DUE: Questo valore imposta la profondità dell'ombra su 2.
- Elevazione. TRE: Questo valore imposta la profondità dell'ombra su 3.
- Elevazione. QUATTRO: Questo valore imposta la profondità dell'ombra su 4.
- Elevazione. CINQUE: Questo valore imposta la profondità dell'ombra su 5.
Il rendering del blocco di codice sopra mostrerà un'immagine sullo schermo simile a questa:
I componenti di Blueprint UI Toolkit sono facili da personalizzare. Puoi usare i CSS tradizionali per modificare l'aspetto dei componenti, oppure puoi utilizzare gli oggetti di scena forniti per modificarne il comportamento.
Ad esempio, puoi personalizzare l'aspetto di un pulsante passando un file nome della classe puntello:
importare Reagire da"reagire";
importare { Pulsante } da"@blueprintjs/core";funzioneApp() {
ritorno (
esportarepredefinito Applicazione;
Il blocco di codice sopra applica una classe personalizzata al pulsante, consentendoti di modificarne l'aspetto utilizzando i CSS:
.mio-pulsante{
bordo-raggio: 10px;
imbottitura: 0.4rim 0.8rim;
}
L'applicazione di questi stili farà sì che il tuo pulsante assomigli un po' a questo:
C'è molto di più nell'interfaccia utente di Blueprint
L'interfaccia utente Blueprint offre più componenti di quelli menzionati sopra, come Alert, Popover, toast, ecc. Tuttavia, con le informazioni fornite, puoi creare una semplice applicazione React utilizzando l'interfaccia utente Blueprint.
Puoi modellare la tua applicazione React usando diversi metodi. Puoi utilizzare CSS tradizionali, SASS/SCSS, Tailwind CSS e CSS nelle librerie JS come emozioni, componenti in stile, ecc.
