Loo materjali kujundamise edenemisriba kergesti Mprogress.js-iga

Google'i ei ole eitanud materjali disain on veebi radikaalselt muutnud. See pakub a ühine disaini keel et kasutajaliidese disainerid saavad rakendada kõiki veebisaite ja mobiilirakendusi.

See materjali kujundamise suundumus on toonud kaasa mitmeid raamatukogusid, sealhulgas populaarset materiaalset raamistikku. Ja üks neist kõige lahedamad uued materiaalsed projektid Ma olen leidnud Mprogress.js.

See JavaScript-raamatukogu loob a materjali-stiilis edenemisriba kasutades puhast CSS ja JavaScript. Sõltumatus puudub, mingit jama. Lihtsalt laadimine (ja eelsalvestamine) materjali kujundusega, mis sobib mis tahes veebisaidi või veebirakendusega.

Seadistamine on üsna lihtne ja nõuab ainult kahte faili: CSS ja JS skript Mprogressilt.

Sa saad alla laadida mõlemad alates GitHub repost või kasutage pakettihaldurit näiteks npm või Bower. Sealt peate luua uus Mprogressi objekt ja ütle, et laadija käivitada.

Seda saab teha sõna otseses mõttes üks koodirida:

 var mprogress = uus Mprogress ('start'); 

Muud omadused saab rakendada progressi riba animatsiooni ajastuse, kiiruse või kuvari värvi muutmiseks. See konfiguratsioon võimaldab teil isegi luua kohandatud mallid lähtudes materjali vaikekujundusest. Vinge!

Pöörake pilgu peale demo leht seda laadijat näha. See ei ole mesmeriseeriv laadimisriba, kuid see pakub kena lahendust, ilma et teil oleks vaja seda nullist ehitada.

Võite käivitada selliseid meetodeid nagu set () kuni määrake protsent või inc () kuni suurendage laadimisriba. Seda saab käsitseda programmiliselt HTTP-laadija loomiseks, kuid see nõuab JavaScriptis lisatööd.

Mprogress.js'i ilu on selle lihtsus. See ei ütle teile, kuidas struktuuri andmeid või mida vajate laadimiseks. See võib olla lehe laadimine või failide üleslaadimise käitlemine. Või võib jälgida, kui kaugele kasutaja on lehe ülaosast sirvinud.

Seda raamatukogu saab teha nii palju kui võimalik nullisõltuvused saate seda kasutada mis tahes veebiprojekti jaoks. Alustamiseks vaadake MProgress repo GitHubis, kus saate ka sirvida dokumentatsioon.