ÚVOD DO BULMY S REACTOM

Úvod do Bulmy s React-V tomto článku sa naučíte základy používania komponentov Bulma vo vašich aplikáciách React pomocou knižnice reaktívnych-Bulma-komponentov.

ngx-bootstrap uhlový 9

Vyjdem von a poviem to, stále som fanúšikom Bootstrap . Vďaka tomu nezabúdam na mnohé alternatívy, ktoré tam plávajú. Jeden z inšpiratívnejších CSS rámce, s ktorými som sa v poslednej dobe stretol, sú Nájsť . Robí všetko, čo potrebujem na to, aby som mohol vytvoriť rámec CSS, a robí skvelú prácu pri zjednodušovaní určitých vecí a zároveň ich robí silnejšími. Oh, a o to nie je núdza o obaly React!

V tomto článku sa budeme hrať s | _+_ |, jednou z najobľúbenejších implementácií rámca Bulma CSS v React.

Táto knižnica je nielen veľmi dobre zdokumentovaná, ale zdá sa, že podporuje takmer všetko, čo je v Bulme k dispozícii, a v súčasnosti sleduje najnovšie vydanie programu Bulma.

Tak, poďme!

Začíname

Ak chcete začať s | _+_ | budeme ho musieť pridať do nášho projektu:

Cez nad morom

react-bulma-components

Alebo prostredníctvom Priadze

react-bulma-components

S pridanou závislosťou budeme ďalej potrebovať | _+_ |.

Na tejto knižnici som našiel skvelé to, že môžete importovať úplné verzie komponentov, ktoré sú súčasťou priradených štýlov, a eliminovať potrebu prepojenia alebo importovania akýchkoľvek ďalších štýlov.

Ak by ste chceli | _+_ | súčasť celej jej štylistickej slávy, jednoducho:

grafana tutoriál pre začiatočníkov

$ npm install --save react-bulma-components

Komponenty

Ako už bolo spomenuté, | _+_ | knižnica podporuje takmer všetko, čo môže Bulma ponúknuť ako pekné komponenty pripravené pre reakciu. Tu je prehľad toho, čo budete mať k dispozícii po vybalení z krabice:

| _+_ | - Biele pole s tieňom na zabalenie obsahu.
| _+_ | - Navigačná ponuka so strúhankou.
| _+_ | - Táto klikacia vec sa zvyčajne nachádza vo formulároch;)
| _+_ | - Formálnejší prvok podobný karte (viac ako len škatuľka).
| _+_ | - Obal a stĺpce pre mriežkový systém.
| _+_ | - Jednoduchý obalový obsah, ktorý reaguje na veľkosť obrazovky.
| _+_ | - Obecný obal pre obsah, ktorý obsahuje HTML.
| _+_ | - Interaktívna rozbaľovacia ponuka.
| _+_ | - Obálka pre obsah päty stránky, môže však obsahovať čokoľvek!
| _+_ | - Formulár ovláda také | _+_ | a podobne.
| _+_ | - Nemýliť si s hlavičkou, toto je pre | _+_ | typ obsahu.
| _+_ | - Tento príspevok potrebuje hrdinu ... a/k/a jumbotrona.
| _+_ | - Obálka pre akékoľvek písmo ikon, ktoré vám vyhovuje (Font Awesome, a ďalšie).
| _+_ | - Obálka pre responzívny obsah obrázkov.
| _+_ | - Podobne ako stĺpce, umožňuje horizontálne zarovnať obsah.
| _+_ | - Osobný favorit, jednoduchý nakladač (ktorý je možné použiť s | _+_ | s!)
| _+_ | - Rámec CSS by nebol úplný s objektom používateľského rozhrania sociálnych médií.
| _+_ | - Podobné upozorneniu na zavrčanie.
| _+_ | - Vertikálne menu pre všetky vaše potreby bočného menu!
| _+_ | - Klasická modálna komponenta používateľského rozhrania, ktorá pojme akýkoľvek obsah, ktorý by ste chceli.
| _+_ | - Nesmie sa zamieňať s | _+_ |, táto súčasť predstavuje dobrú navigačnú lištu hlavičky.
| _+_ | - Podobné ako | _+_ | ale bez záhlavia.
| _+_ | - Pre všetky vaše stránky a stránky s obsahom.
| _+_ | - Ovládač pre kompaktné ovládače. Hybridné menu a karta, super výkonné.
| _+_ | - Natívne ukazovatele priebehu HTML, ktoré je možné ľahko zafarbiť a zmeniť veľkosť.
| _+_ | - Kontajner na zoskupovanie obsahu na vašej stránke.
| _+_ | - Ďalšie horizontálne nav s tabuľkovým vzhľadom a dojmom.
| _+_ | - Podľa dokumentácie: Nevyhnutná tabuľka HTML.
| _+_ | - Môžete to označiť ako odznak alebo štítok.
| _+_ | - Jeden z inšpirovanejších komponentov, jednoduchý spôsob implementácie dlaždicového používateľského rozhrania ako Pinterest/Metro.

Viac než dosť na to, aby ste skutočne poškodili svoj ďalší projekt!

Základy

Rovnako ako väčšina rámcov CSS, Bulma prichádza so štýlmi pre vaše bežné komponenty a sériou prispôsobení, ktoré je možné dosiahnuť pridaním rôznych tried do vašich prvkov.

| _+_ | ďalej veci zjednodušuje tým, že poskytuje komponenty pre každý z hlavných prvkov, a eliminuje potrebu žonglovania s názvami tried v prospech odovzdávania vlastností vašim komponentom.

Chcete vytvoriť veľké tlačidlo, ktoré používa farbu nebezpečenstva, má zaoblené rohy a je obrys? Žiaden problém:

$ yarn add react-bulma-components

To je všetko v poriadku, ale čo keby sme chceli, aby toto tlačidlo bolo odkazom (tj. Kotviacim prvkom)?

Našťastie všetky | _+_ | môže prijať | _+_ | vlastnosť, ktorá vám umožňuje definovať, aký druh prvku by sa mal použiť na vykreslenie komponentu.

Bez | _+_ | nehnuteľnosť vyššie uvedený | _+_ | budú vykreslené ako ... uhádli ste! A | _+_ | element.

Spolu s | _+_ | nehnuteľnosť, do ktorej by sme mali zahrnúť aj | _+_ | aby mu povedali, kam má poslať ľudí, keď kliknú na odkaz:

www netflix com tv

import

V skutočnosti všetky naše súčasti Bulma môžu akceptovať akékoľvek vlastnosti, ktoré im môžete udeliť. To znamená, že pomocou | _+_ | môžete vždy urobiť nejaký pokročilý štýl vlastnosti alebo pridať niektoré ďalšie triedy CSS pomocou | _+_ |.

Pri použití | _+_ | budú všetky triedy, ktoré zadáte, zaradené do zoznamu názvov tried Bulma generovaných knižnicou.

Farby

Podobne ako väčšina moderných rámcov CSS, Bulma prichádza s farebným motívom, ktorý používa niektoré konvencie sémantického pomenovania.

Medzi tieto farby tém patria | _+_ |, | _+_ |, | _+_ |, | _+_ |, | _+_ | a | _+_ |.

Okrem toho je k dispozícii aj niekoľko ďalších doslovných farieb: | _+_ |, | _+_ |, | _+_ | a | _+_ |.

Komponenty, ktoré podporujú farby, akceptujú | _+_ | nehnuteľnosť:

Button

Ktorý priradí vykreslenému prvku správnu triedu farieb. Pretože táto vlastnosť farby priraďuje triedy späť k vykreslenému prvku, nemôžete priradiť iba ľubovoľnú hodnotu farby.

Veľkosti

Práca s veľkosťami s Bulmou je v skutočnosti o niečo jednoduchšia ako práca s farbami. Dôvodom je, že niektoré komponenty (ako | _+_ |) používajú pre veľkosti textové názvy, zatiaľ čo iné (ako | _+_ |) používajú číselné hodnoty:

ako nakupovať na bitmarte

import { Button } from 'react-bulma-components/full';

Pre komponenty, ktoré akceptujú veľkosti textu, máte | _+_ |, | _+_ |, | _+_ | a | _+_ | k dispozícii. | _+_ | veľkosť je tá, ktorá sa predvolene používa, ak nie je zadané | _+_ |.

Just Works Grid

Bulma marketing uvádza, že ich mriežkový systém je najjednoduchší mriežkový systém.

Keď som použil niekoľko mriežkových systémov a dokonca som si písal svoje vlastné, v minulosti priznávam, je to veľmi jednoduché použitie.

Napriek tomu, že je jednoduchý, je stále bohatý na funkcie, ako sú napríklad citlivé zarážky, posuny stĺpcov a vnorenie.

To, čo som považoval za veľmi pôsobivé, je, že zatiaľ čo systém Bulma grid funguje celkom dobre v štandardnom 12 stĺpcovom rozložení, nenúti vás to do uvedenej paradigmy.

Táto flexibilita je tiež tam, kde | _+_ | majetok naberá na obrátkach. Na rozdiel od | _+_ | ktorý používa | _+_ |… | _+_ | konvencia pomenovania, | _+_ | komponenty používajú inú sadu | _+_ | názvy, ktoré zodpovedajú tomu, koľko miesta stĺpec zaberie.

Veľkosti stĺpcov sú tiež rozdelené na dva typy, percentá a počet stĺpcov v rozložení 12 stĺpcov.

ako nájsť staré účty na Twitteri

Pre percentuálnu veľkosť môžete nastaviť | _+_ | byť | _+_ |, | _+_ |, | _+_ |, | _+_ |, | _+_ | alebo | _+_ |:

react-bulma-components

A pre veľkosti založené na 12 stĺpcovom rozložení nastavíte | _+_ | na číselnú hodnotu medzi | _+_ | a | _+_ |:

Box

Záver

S viac ako 30 000 hviezdičkami na GitHub je ťažké považovať Bulmu len za ďalší rámec CSS v už preplnenom priestore.

Mne osobne to pripadalo celkom známe z iných rámcov CSS, ale prinieslo to aj vlastnú úroveň jednoduchosti a flexibility, vďaka ktorej bolo ľahké ho vyzdvihnúť.

Spojte túto jednoduchosť s väzbami React, ktoré poskytuje | _+_ |, určite to budem zvažovať pre svoj ďalší projekt.

Dúfam, že ste našli tento prehľad na vysokej úrovni Bulma a | _+_ | informatívne a nápomocné, na zdravie!

#css #reactjs #vývoj webových aplikácií

aligátor.io