Izveidot materiālu dizaina progresa joslu viegli ar Mprogress.js

Nav noliegt, ka Google ir materiālu dizains ir radikāli mainījis tīmekli. Tā piedāvā a kopēja dizaina valoda UI dizaineri var pieteikties uz visām vietnēm un mobilajām lietotnēm.

Šī materiālā dizaina tendence ir novedusi pie daudzām bibliotēkām, ieskaitot populāro materiālo sistēmu. Un viens no stilīgākie jauni materiālie projekti Esmu atradis Mprogress.js.

Šī JavaScript bibliotēka ģenerē a materiāla stila progresa josla izmantojot tīru CSS un JavaScript. Nav atkarību, nav muļķības. Tikai vienkārša iekraušana (un iepriekšēja ielāde) ar materiāla dizaina izskatu, kas atbilst jebkurai tīmekļa vietnei vai tīmekļa lietojumprogrammai.

Uzstādīšana ir diezgan vienkārša un nepieciešams tikai divi faili: CSS un JS skripts no Mprogress.

Jūs varat lejupielādējiet abus no GitHub repo vai izmantot pakotnes pārvaldnieku piemēram, npm vai Bower. No turienes jums ir nepieciešams izveidot jaunu Mprogress objektu un pastāstiet, lai sāktu iekrāvēju.

To var izdarīt ar burtiski viena koda rindiņa:

 var mprogress = jauns Mprogress ('sākums'); 

Citas īpašības var izmantot, lai mainītu progresa joslas animācijas laiku, ātrumu vai displeja krāsu. Šī konfigurācija pat ļauj jums izveidot pielāgotas veidnes pamatojoties uz noklusējuma materiāla dizaina stilu. Satriecošs!

Palieciet uz demonstrācijas lapa redzēt šo iekrāvēju darbībā. Tas nav mierinošs iekraušanas stienis, tomēr tas piedāvā jauku risinājumu, bez nepieciešamības to izveidot no nulles.

Varat izmantot tādas metodes kā komplekts () uz iestatiet procentu vai inc () uz palieliniet iekraušanas joslu. Programmu var apstrādāt, lai izveidotu HTTP iekrāvēju, bet tas prasa papildus darbu JavaScript.

Mprogress.js skaistums ir tās vienkāršība. Tas nenorāda, kā strukturēt datus vai to, kas jums nepieciešams. Tas varētu būt lapas ielāde, vai arī tas varētu būt failu augšupielāde. Vai arī varētu būt izsekot, cik tālu lietotājs ir pārvietojies no lapas augšdaļas.

Ir tik daudz, ko varat darīt ar šo bibliotēku un ar nulles atkarības jūs varat to izmantot jebkuram tīmekļa projektam. Lai sāktu darbu, pārbaudiet MProgress repo GitHub, kur var arī pārlūkot dokumentācija.