Nasıl Yapılır: Vue istifadə edən sadə bir atlıkarınca!

Və ya öz atlıkarınca qurmağı öyrəndiklərim.

https://acollectionofatoms.github.io/vue-carousel-example/

Karusellər, slayt şouları və ya sadəcə "sürgülər". Hər yerdə yayılmış bu UI komponenti veb dizaynında bir yer qazandı. Beləliklə, müxtəlif texnologiyalarda bir çox tətbiq var.

Vue.js-in fərqli olmadığını tapa bilərsiniz.

Amma!

Npm quraşdırmadan əvvəl, qutudan kənar bir Vue layihəsindən əldə edə biləcəyiniz güc miqdarını nəzərdən keçirin.

Daxil edin ...

Keçid qrupu

React-dən gələnlər bir keçid qrupu anlayışı ilə tanış ola bilərlər. Əlavə olmaqdansa, keçid qrupu Vue ilə əvvəlcədən quraşdırılmış (daha yaxşı və ya pis) gəlir və zəngin keçid API'si həqiqətən yeni bir yükləmədən sonra dərhal mövcuddur.

Bilinməyənə görə, bir keçid qrupu bir sarma komponentinə bənzəyir - hər ikisi də elementlərin öz içərisində çıxarılması, əlavə edilməsi və (keçid qrupu halında) hərəkətinin animasiyasına imkan verir.

Birazdan keçid qrupuna girəcəyik, amma əvvəlcə öz atlıkarınca qurmağınızı asanlaşdıran şeylərlə tanış olmaq istəyirik.

FLIP və Azadlıq (başqa paketdən)

Yaxşı karusel nədir? Fokusa (və ya görünüşə) doğru irəliləyən böyük bir elementiniz (ümumiyyətlə bir şəkil) var. Sadəcə olaraq, bir elementin başqa bir yerə sorunsuz şəkildə köçürülməsi mübahisəsiz ən vacib hissədir. Vue sənədlərinin keçid sahəsini yaxalayırsınızsa, olduqca uykusuz animasiyalar görəcəksiniz.

Sənədlərə görə ...

Bu sehrli kimi görünə bilər, ancaq başlıq altında Vue elementləri köhnə vəziyyətindən yeni vəziyyətinə çevirmələr vasitəsilə rəvan hərəkət etdirmək üçün FLIP adlı sadə bir animasiya texnikasından istifadə edir.

Və bu, heç bir asılılığı olmayan bir ölkəyə biletimizdir. Daxili FLIP texnologiyası onsuz da bizə bir atlıkarınca bir atlıkarınca olan çörək və yağ verir!

Disclamer!

Başlamadan əvvəl yalnız başlıqdakı sözü vurğulamaq istəyirəm.

Çılpaq sümükləri olan 2 ölçülü karuseldən danışırıq. Ümumdünya Şəbəkəsinin istənilən cari istifadəçisi tərəfindən dərhal tanınacaq olanı. Burada tapılan bu başlanğıc atlıkarınca fərqli deyil.

Heç bir fırıldaq yoxdur və heç bir toxunma slaydı funksiyasını tətbiq etmirik. Bu məqalədə bir atlıkarınca üçün yalnız bir mümkün əsas təsvir edilmişdir.

Bunu yoldan çıxarın ...

Başlayın

Sürətlə başlamaq üçün rəsmi olaraq dəstəklənən Vue iskele aləti ilə AKA təkər terminalı üçün hile kodunu daxil edirik.

CLI qurduqdan sonra prototip hazırlamaq asan bir şey olur.

Sadə paket şablonu sürətli prototiplər üçün xüsusilə faydalıdır və bu səbəbdən işlərin davam etdirilməsi üçün idealdır.

Fəaliyyətə girən kimi App.vue ilə başlayacağıq

App.vue çox gözəldir

Çox xoş. Tamam, onu silək və yenidən başlayaq.

mhm

Və müvafiq olaraq app.js-i dəyişdirin ...

İndi yeni bir başlanğıcımız var:

Heç bir şəkil.

Tamam əladır

The