React ilə bir inkişaf çubuğu necə yaradılır

Bu təlimat React-də sadə bir irəliləyiş çubuğunu necə qurmağı ilə maraqlanan hər kəs üçündür. Bunu hər kəsə xoş və asan etmək üçün təlim zamanı Codependəki nümunəmizi genişləndirəcəyəm. Sonda bitmiş versiyaya bir keçid əlavə olunacaq.

Digər əşyalarımı yoxlayın

Əgər maraqlanırsınızsa, cari məqaləni oxuduqdan sonra özünüzü məlumatlandırın!

Komponenti planlaşdırın

Kodunuzu yazmağa başlamazdan əvvəl, cavab tərəqqi çubuğumuzun necə görünməsini istədiyinizə tez qərar verə bilərsiniz. Mənə elə gəlir ki, irəliləmə çubuğumuzu formalaşdırmaq üçün yalnız iki elementə ehtiyacımız var. Bu elementlər:

  • Başqa bir div olan bir ana div. Buna bir ProgressBar deyək.
  • Ana div daxilində bir doldurucu element rolunu oynayan bir div. Bu div rəng ilə hazırlanmışdır və qabın x faizini üfüqi və şaquli olaraq doldurur. Gəlin buna bir doldurucu deyək.

ProgressBar İskelesi

Tamam, kodlaşdırmağa keçək. Tərəqqi çubuğunun skeletini qurmağa başlayaq. Bu təlimatda ProgressBar-ı funksional reaksiya komponenti kimi istifadə edirəm. Bunu etmək üçün başqa bir çox yol var, ancaq gəlin bu yanaşma ilə davam edək.

Planlaşdırma hissəsində danışdığım ana div. İçərisində yalnız doldurucu komponenti əlavə etməliyik. Bunu hələ tikməmişik, gəlin inşa edək!

Əla. İki komponentimiz var. Dolgu maddəsini ProgressBar-a yapışdırın.

Vay, bu heyrətamizdir. Bunun xaricində, bu komponentlərdən heç biri üçün bir stil yoxdur. Gəl bunları sürətlə tərtib edək!

İrəliləmə çubuğu sinifindəki üslublar olduqca sadədir. Haşiyə radiusundan istifadə edərək yalnız başlanğıc hündürlüyü və genişliyi, bir kənar və bəzi yuvarlaq kənarları verirəm. Mövqeyimin istifadəsini qeyd etmək vacibdir: doldurma sinfinə 100% yüksəklik təyin etdiyim üçün bu irəliləmə çubuğu sinfinə nisbətən tələb olunur.

Dolum üslubları üçün bunları da anlamaq asandır. Dolgu fonunu firuzəyi mavi rəngə (# 1DA598) qoydum və doldurucumun hündürlüyünün 100% hündürlüyü verərək ana doldurucu ilə uyğun olduğundan əmin oldum. Mən də çərçivə radiusunun ana radiusla eyni olmasını istəyirəm, buna görə də onu ana radiusdan götürmək üçün təyin edəcəyəm.

Dolgu materialına əlavə etdiyim keçidlə maraqlana bilərsiniz. Bu, yalnız ölçüsü artdıqca / azaldıqca doldurucu keçidi daha təbii edir. İnkişaf çubuğu üçün hazırda nəyə sahib olduğumuzu görək:

Darıxdırıcı, boş bir irəliləyiş çubuğu = (

Bəzi rekvizitlər əlavə edərək bu darıxdırıcı irəliləyiş çubuğunu düzəldə bilərik. Gəlin, bunu edək!

Komponentə lazımi rekvizitlərin əlavə edilməsi

Tərəqqi göstəricimizin doldurma komponentinin genişliyinin dinamik şəkildə dəyişməsinə imkan verən bir sistem inkişaf etdirməliyik. React-un statusu və dayaq funksiyalarını birləşdirməyə başlamağımız lazım olan yerdir. Bu funksiyaları sınaqdan keçirə biləcəyimiz başqa bir komponent yaradaq.

Gördüyünüz kimi, Faiz statusu üçün bir xüsusiyyəti işə salıram və ona 0 ilkin dəyər verirəm. Bu, doldurucumuzun genişliyini idarə etmək üçün istifadə edəcəyimiz vəziyyət dəyişənidir. ProgressBar-ın bu dəyərdən xəbərdar olması üçün onu komponentə bağlı bir dəstək olaraq ötürürəm.

Ancaq bir problem var. Dəyəri bir dayaq kimi ötürməyimiz çox yaxşıdır, lakin ProgressBar komponenti hələ də bu dayağı necə idarə edəcəyini bilmir. Bunu düzəltmək üçün aşağıdakıları edə bilərik:

Doldurucuya bağlanan bir dayaq yaradaraq dəyəri Doldurucuya ötürə bilərik. İndi etməli olduğumuz tək şey Doldurucuda əldə etdiyimiz dəyərlə bir şey etməkdir və bunu etməliyik.

Dolgu genişliyini tənzimləyin

Etməli olduğumuz son şey, Doldurucuda dayaq olaraq aldığımız dəyəri doldurucunun eni olaraq təyin etməkdir. Bu asanlıqla satır içi üslub istifadə edilə bilər. Gəlin necə edildiyini görək.

Dolğunun genişliyini dayaq dəyərinə əsasən dinamik şəkildə tənzimləyin

Bu belədir! ProgressBarExample-ın ilkin vəziyyət mülkiyyətini yalnız vuruşlar üçün 60-a dəyişdirin:

İndi hərəkətdə olan möhtəşəm irəliləyiş çubuğumuza baxın!

Şeyi sarın

İndi bunun çox sadə bir nümunə olduğunu bilirəm, amma Codepen-i sınaqdan keçirə biləcəyiniz daha ətraflı bir versiyanı əlavə etdim. Tamamilə interaktivdir və inşallah sizə yeni bir şey öyrədir. Bu dərslikdən xoşunuz gəlsə, məni GitHub-da izləməyinizi istərdim!

https://github.com/dzuz14

Sol

YouTube'a pulsuz cavab verməyi öyrənin

Bu məqaləni oxuduqdan sonra, sıfırdan kiçik bir qalereya necə yaradacağımı göstərdiyim üçün Reakt mövzusundakı pulsuz YouTube təlimatımı yoxladığınızdan əmin olun. Oxumağa başlamazdan əvvəl qeyd etməkdən çəkinməyin! =)

Codepen üçün tam irəliləmə çubuğu nümunəsi

DanZuzevich.com