Sukurti medžiagos dizaino pažangos juostą lengvai su „Mprogress.js“

Negalima paneigti, kad „Google“ medžiagos dizainas radikaliai pakeitė žiniatinklį. Ji siūlo a bendra dizaino kalba kad UI dizaineriai gali kreiptis į visas svetaines ir mobilias programas.

Ši materialinė dizaino tendencija lėmė daugybę bibliotekų, įskaitant populiarią „Materializuoti“ sistemą. Ir vienas iš naujausi materialūs projektai Radau Mprogress.js.

Ši „JavaScript“ biblioteka sukuria a medžiagos stiliaus pažangos juosta naudojant „CSS“ ir „JavaScript“. Nėra priklausomybių, nesąmonė. Tiesiog paprasta pakrovimas (ir išankstinis įkrovimas) su materialiu dizainu, kuris atitiks bet kurią interneto svetainę ar interneto programą.

Sąranka yra gana paprasta ir reikia tik dviejų failų: CSS ir JS scenarijus iš „Mprogress“.

Tu gali atsisiųsti abu iš „GitHub“ repo arba naudoti paketų tvarkyklę pvz., npm arba Bower. Iš ten jums reikia sukurti naują „Mprogress“ objektą ir pasakykite, kad pradėtumėte krautuvą.

Tai galima padaryti tiesiogine prasme viena eilutė kodo:

 var mprogress = naujas Mprogress ('start'); 

Kitos savybės gali būti naudojama keisti progreso juostos animacijos laiką, greitį arba ekrano spalvą. Ši konfigūracija netgi leidžia jums sukurti tinkamus šablonus pagal numatytąjį medžiagos dizaino stilių. Nuostabu!

Pažvelkite į demonstracinis puslapis pamatyti šį krautuvą veikiant. Tai nėra įtaigus krovimo baras, tačiau jis siūlo gražią sprendimą, be to, jums nereikės sukurti iš naujo.

Galite paleisti tokius metodus kaip rinkinys () į nustatyti procentą arba inc () į didinkite pakrovimo juostą. Jis gali būti tvarkomas programiniu būdu, kad būtų sukurtas HTTP krautuvas, tačiau tai reikalauja papildomo darbo „JavaScript“.

Mprogress.js grožis yra jos paprastumas. Jis nesako jums, kaip struktūrizuoti duomenis ar ką reikia įkelti. Tai gali būti puslapio įkėlimas arba failo įkėlimas. Arba gali būti stebima, kiek žemyn vartotojas yra nuvilkęs iš puslapio viršaus.

Yra tiek daug, ką galite padaryti su šia biblioteka ir su nulinės priklausomybės galite jį naudoti bet kuriam interneto projektui. Norėdami pradėti, patikrinkite MProgress repo GitHub, kur taip pat galite naršyti dokumentacija.