Introduzione a Bulma con React

Blog

Introduzione a Bulma con React - In questo articolo imparerai le basi dell'utilizzo dei componenti Bulma nelle tue app React utilizzando la libreria react-bulma-components.



trucchi e suggerimenti javascript

Uscirò e lo dirò, sono ancora un fan di Bootstrap . Con ciò, non sono ignaro delle molte alternative che fluttuano là fuori. Uno dei più ispirati CSS framework che ho incontrato di recente è Trova . Fa tutto ciò di cui ho bisogno per un framework CSS e fa un ottimo lavoro nel semplificare alcune cose rendendole allo stesso tempo più potenti. Oh, e non mancano i wrapper React per questo!

Per questo articolo giocheremo con |_+_|, una delle implementazioni più popolari del framework Bulma CSS in React.



Non solo questa libreria è molto ben documentata, ma sembra supportare praticamente tutto ciò che è disponibile in Bulma ed è attualmente in fase di monitoraggio rispetto all'ultima versione di Bulma.

Quindi andiamo!



Iniziare

Per iniziare con |_+_| dovremo aggiungerlo al nostro progetto:

Via sopra il livello del mare

react-bulma-components

O tramite Yarn

react-bulma-components

Con la nostra dipendenza aggiunta, successivamente dovremo |_+_|.

Quello che ho trovato fantastico in questa libreria è che puoi importare versioni complete dei componenti forniti con gli stili associati ed eliminare la necessità di collegare o importare stili aggiuntivi.

Se volevi il |_+_| componente in tutta la sua gloria stilistica, semplicemente:

come ripristinare l'extender wifi msrm?
$ npm install --save react-bulma-components

I componenti

Come accennato, il |_+_| la libreria supporta praticamente tutto ciò che Bulma ha da offrire come bei componenti pronti per React. Ecco una carrellata di ciò che avrai a disposizione fuori dalla scatola:

  • |_+_| - Una scatola bianca con un'ombra per concludere il contenuto.
  • |_+_| - Menu breadcrumb di navigazione.
  • |_+_| - Quella cosa cliccabile che di solito si trova sui moduli ;)
  • |_+_| - Un componente più formale simile a una carta (più di una semplice scatola).
  • |_+_| - Wrapper e colonne per il sistema a griglia.
  • |_+_| - Un wrapper di contenuti senza fronzoli che risponde alle dimensioni dello schermo.
  • |_+_| - Un wrapper generico per il contenuto che contiene HTML.
  • |_+_| - Un menu a tendina interattivo.
  • |_+_| - Un wrapper per il contenuto del piè di pagina può contenere qualsiasi cosa però!
  • |_+_| - Il modulo controlla un tale |_+_| e simili.
  • |_+_| - Da non confondere con un'intestazione, questo è per |_+_| tipo contenuto.
  • |_+_| - Questo post ha bisogno di un eroe... a/k/a un jumbotron.
  • |_+_| - Un wrapper per qualsiasi carattere di icona con cui ti senti a tuo agio (Font Awesome, eccetera).
  • |_+_| - Un wrapper per il contenuto dell'immagine reattivo.
  • |_+_| - Simile alle colonne, consente di allineare il contenuto orizzontalmente.
  • |_+_| - Personal preferito, un semplice caricatore (che può essere utilizzato con |_+_|s!)
  • |_+_| - Un framework CSS non sarebbe completo con un oggetto dell'interfaccia utente dei social media.
  • |_+_| - Simile a una notifica di ringhio.
  • |_+_| - Un menu verticale per tutte le esigenze del tuo menu laterale!
  • |_+_| - Componente dell'interfaccia utente modale classico che può contenere qualsiasi contenuto desideri.
  • |_+_| - Da non confondere con |_+_|, questo componente è una buona barra di navigazione dell'intestazione.
  • |_+_| - Simile a |_+_| ma senza barra del titolo.
  • |_+_| - Per tutte le tue pagine e pagine di contenuto.
  • |_+_| - Un controllo per controlli compatti. Un menu e una carta ibridi, super potenti.
  • |_+_| - Barre di avanzamento HTML native che possono essere colorate e ridimensionate facilmente.
  • |_+_| - Contenitore per raggruppare i contenuti sulla tua pagina.
  • |_+_| - Un altro navigatore orizzontale con aspetto tabulare.
  • |_+_| - Come da documentazione: L'inevitabile tabella HTML.
  • |_+_| - Puoi fare riferimento a questo come un badge o un'etichetta.
  • |_+_| - Uno dei componenti più ispirati, un modo semplice per implementare un'interfaccia utente piastrellata simile a Pinterest/Metro.

Più che sufficienti per fare davvero dei danni al tuo prossimo progetto!

Le basi

Come la maggior parte dei framework CSS là fuori, Bulma viene fornito con stili per i tuoi componenti comuni e una serie di personalizzazioni che possono essere realizzate aggiungendo classi diverse ai tuoi elementi.

|_+_| semplifica ulteriormente le cose fornendo componenti per ciascuno degli elementi principali ed elimina la necessità di destreggiarsi tra i nomi delle classi a favore del passaggio delle proprietà ai componenti.

Vuoi creare un pulsante grande che utilizzi il colore di pericolo, abbia gli angoli arrotondati e sia un contorno? Nessun problema:

$ yarn add react-bulma-components

Va tutto bene, ma cosa succede se volessimo che quel pulsante fosse un collegamento (cioè un elemento di ancoraggio)?

Fortunatamente, tutti i |_+_| può accettare un |_+_| proprietà che consente di definire quale tipo di elemento deve essere utilizzato per eseguire il rendering del componente.

Senza |_+_| proprietà il suddetto |_+_| sarà reso come... hai indovinato! A |_+_| elemento.

Insieme a |_+_| proprietà dovremmo includere anche un |_+_| per dirgli dove inviare le persone quando fanno clic sul collegamento:

modello a oggetti del browser javascript
import

In effetti, tutti i nostri componenti Bulma possono accettare qualsiasi proprietà tu possa dare loro. Ciò significa che puoi sempre eseguire uno stile avanzato con un |_+_| proprietà o aggiungere alcune classi CSS aggiuntive con |_+_|.

Quando si utilizza |_+_|, tutte le classi fornite verranno anteposte all'elenco generato dalla libreria dei nomi delle classi Bulma.

Colori

Simile alla maggior parte dei moderni framework CSS, Bulma viene fornito con un tema di colore che utilizza alcune convenzioni di denominazione semantica.

Questi colori del tema includono |_+_|, |_+_|, |_+_|, |_+_|, |_+_| e |_+_|.

Inoltre, sono disponibili anche altri colori letterali: |_+_|, |_+_|, |_+_| e |_+_|.

I componenti che supportano i colori accettano un |_+_| proprietà:

Button

Che assegnerà la classe di colore corretta all'elemento renderizzato. Poiché questa proprietà color assegna le classi all'elemento renderizzato, non puoi semplicemente assegnare un valore di colore arbitrario.

taglie

Lavorare con le taglie con Bulma è in realtà un po' meno semplice che lavorare con i colori. Questo perché alcuni componenti (come |_+_|) usano nomi testuali per le dimensioni mentre altri (come |_+_|) usano valori numerici:

dove posso comprare la moneta bepro?
import { Button } from 'react-bulma-components/full';

Per i componenti che accettano dimensioni testuali, hai |_+_|, |_+_|, |_+_| e |_+_| a disposizione. Il |_+_| size è quella utilizzata per impostazione predefinita quando non viene specificato |_+_|.

Just Works Grid

Qualcosa che il marketing di Bulma pubblicizza è che il loro sistema di griglia è il sistema di griglia più semplice.

Avendo usato un certo numero di sistemi di griglia e anche scrivendo il mio nel corso della giornata, ammetterò che è piuttosto semplice da usare.

Anche se è semplice, è comunque ricco di funzionalità con cose come punti di interruzione reattivi, offset di colonna e nidificazione.

Quello che ho trovato molto impressionante è che mentre il sistema a griglia Bulma funziona abbastanza bene in un layout standard a 12 colonne, non ti costringe a tale paradigma.

Questa flessibilità è anche il motivo per cui |_+_| proprietà fa una svolta. A differenza di un |_+_| che utilizza |_+_|…|_+_| convenzione di denominazione, |_+_| i componenti utilizzano un diverso insieme di |_+_| nomi che corrispondono a quanto spazio occuperà la colonna.

Le dimensioni delle colonne sono anche divise in due tipi, percentuali e per numero di colonne in un layout a 12 colonne.

miglior motore di gioco js

Per il dimensionamento basato sulla percentuale è possibile impostare |_+_| essere |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, o |_+_|:

react-bulma-components

E per le dimensioni basate su un layout a 12 colonne si imposta |_+_| al valore numerico compreso tra |_+_| e |_+_|:

Box

Conclusione

Con oltre 30.000 stelle su GitHub, è difficile considerare Bulma solo un altro framework CSS in uno spazio già affollato.

Personalmente l'ho trovato abbastanza familiare proveniente da altri framework CSS, ma ha anche portato il suo livello di semplicità e flessibilità che lo ha reso facile da imparare.

Abbina questa semplicità ai collegamenti React forniti da |_+_|, lo terrò sicuramente in considerazione per il mio prossimo progetto.

Spero che tu abbia trovato questa panoramica di alto livello su Bulma e |_+_| informativo e utile, ciao!

#css #reactjs #web-development

alligatore.io

Introduzione a Bulma con React

Introduzione a Bulma con React - In questo articolo imparerai le basi dell'utilizzo dei componenti Bulma nelle tue app React utilizzando la libreria react-bulma-components.