Aflați cum această bibliotecă convenabilă poate activa o interfață glisabilă în aplicațiile dvs. cu un efort minim.
Pe măsură ce dispozitivele mobile devin tot mai populare, interfețele glisabile au devenit o modalitate standard de interacțiune cu aplicațiile. Interfețele cu glisare sunt esențiale pentru a oferi cea mai bună experiență de utilizare utilizatorilor de telefonie mobilă.
Swiper este o bibliotecă versatilă care vă permite să creați interfețe glisabile în aplicațiile dvs. React. Descoperiți cum puteți crea interfețe glisabile în aplicația dvs. React folosind Swiper.
Instalarea Swiper
Swiper este una dintre numeroasele biblioteci pe care le puteți folosi pentru a vă personaliza aplicația React. Pentru a începe cu Swiper, trebuie să îl instalați în aplicația React. Puteți face acest lucru cu următoarea comandă de terminal pe care ar trebui să o rulați în directorul rădăcină al proiectului:
npm install swiper
După ce ați instalat Swiper, îl puteți utiliza în aplicația dvs.
Crearea interfețelor glisabile
După ce instalați Swiper în aplicația dvs. React, puteți crea interfețe care pot fi glisate. Începeți prin a importa Swiper și SwiperSlide componente din biblioteca Swiper.
Componenta Swiper este componenta de bază a bibliotecii Swiper. Acesta definește structura, comportamentul și funcționalitatea elementelor care pot fi glisate. Componenta SwiperSlide este o componentă secundară a componentei Swiper. Acesta definește diapozitivele individuale care se află în componenta Swiper.
Iată un exemplu de interfață care se poate glisa folosind componentele Swiper și SwiperSlide:
import Reacţiona din'reacţiona';
import { Swiper, SwiperSlide} din„swiper/react”;
import„swiper/css”;funcţieApp() {
întoarcere (<divnumele clasei='element'>Elementul 1div></SwiperSlide> <divnumele clasei='element'>Elementul 2div></SwiperSlide> <divnumele clasei='element'>Elementul 3div></SwiperSlide> <divnumele clasei='element'>Elementul 4div></SwiperSlide>
</Swiper>
</div>
)
}
exportMod implicit App
În plus față de Swiper și SwiperSlide componente, acest bloc de cod importă foaia de stil implicită pentru Swiper folosind swiper/css modul.
Exemplul include apoi o componentă Swiper în jurul a patru componente secundare SwiperSlide. Fiecare SwiperSlide conține un div element cu numele clasei atribut. Puteți folosi className pentru a stila elementele div:
.element {
mărime în linie: 100px;
hotar-raza: 12px;
căptușeală: 1rem;
culoare: #333333;
culoare de fundal: #e2e2e2;
familie de fonturi: cursiv;
}
Personalizarea interfeței cu glisare
După ce ați creat cu succes o interfață glisabilă, puteți îmbunătăți aspectul și funcționalitatea acesteia pentru a se potrivi cerințelor dvs.
Cu Swiper, puteți personaliza comportamentul și aspectul interfeței folosind diferite opțiuni. Transmiteți aceste opțiuni către Swiper component ca recuzită în React:
import Reacţiona din'reacţiona';
import { Swiper, SwiperSlide} din„swiper/react”;
import„swiper/css”;funcţieApp() {
întoarcere (
spaceBetween={30}
slidesPerView={2}
bucla={ Adevărat }
><divnumele clasei='element'>Elementul 1div></SwiperSlide> <divnumele clasei='element'>Elementul 2div></SwiperSlide> <divnumele clasei='element'>Elementul 3div></SwiperSlide> <divnumele clasei='element'>Elementul 4div></SwiperSlide>
</Swiper>
</div>
)
}
exportMod implicit App
În acest exemplu, componenta Swiper are trei elemente de recuzită: spaceBetween, slidesPerView, și buclă. The spaceBetween prop setează spațiul dintre fiecare diapozitiv, în acest caz 30 de pixeli.
Folosind slidesPerView prop, puteți seta numărul de diapozitive vizibile simultan. În acest caz, slidesPerView prop este setat la 2 determinând Swiper componentă pentru a afișa două diapozitive simultan.
În cele din urmă, buclă prop specifică dacă diapozitivele ar trebui să circule la infinit sau nu. În acest exemplu, diapozitivele se vor bucla la infinit, deoarece buclă valoarea prop este Adevărat.
Configurarea interfețelor glisabile cu module
Puteți configura în continuare comportamentul interfeței glisabile cu module JavaScript oferit de biblioteca Swiper. Unele dintre modulele pe care le oferă sunt Navigare, Redare automata, Paginare, și Bara de defilare.
Pentru a utiliza oricare dintre aceste module în aplicația dvs., trebuie să le importați din biblioteca Swiper. De asemenea, ar trebui să importați stilurile CSS corespunzătoare pentru module și să transmiteți numele acestora către Swiper componentă folosind module recuzită.
De exemplu, acesta este modul în care puteți utiliza Navigare modul pentru a vă configura interfețele glisabile:
import Reacţiona din"reacţiona";
import { Swiper, SwiperSlide } din„swiper/react”;
import { Navigare } din"swiper";
import"swiper/css";
import„swiper/css/navigation”;funcţieApp() {
întoarcere (
spaceBetween={30}
slidesPerView={2}
modules={[Navigație]}
bucla={Adevărat}
navigare={Adevărat}
><divnumele clasei="element">Elementul 1div></SwiperSlide> <divnumele clasei="element">Elementul 2div></SwiperSlide> <divnumele clasei="element">Elementul 3div></SwiperSlide> <divnumele clasei="element">Elementul 4div></SwiperSlide>
</Swiper>
</div>
);
}
exportMod implicit Aplicație;
Acest bloc de cod importă Navigare modul și stilul său CSS, apoi specifică modulul în fișierul module prop de la Swiper componentă. The module prop activează și configurează modulele furnizate de biblioteca Swiper.
Modulul de navigare oferă funcționalitate de navigare componentei Swiper. Acesta adaugă butoanele săgeată anterior și următor pe care le puteți face clic sau atinge pentru a trece la diapozitivul anterior sau următor.
The navigare valoarea prop este adevărată, ceea ce va face ca butoanele precedente și următoare să apară pe ecran.
Configurarea interfețelor glisabile cu redare automată
The Redare automata modulul permite glisorului să treacă automat între diapozitive fără interacțiunea utilizatorului.
Iată un exemplu despre cum să configurați interfața glisabilă folosind Redare automata modul:
import Reacţiona din"reacţiona";
import { Swiper, SwiperSlide } din„swiper/react”;
import { Redare automata } din"swiper";
import"swiper/css";
import„swiper/css/autoplay”;funcţieApp() {
întoarcere (
spaceBetween={30}
slidesPerView={2}
modules={[Redare automată]}
bucla={Adevărat}
redare automată={{ întârziere: 3000 }}
><divnumele clasei="element">Elementul 1div></SwiperSlide> <divnumele clasei="element">Elementul 2div></SwiperSlide> <divnumele clasei="element">Elementul 3div></SwiperSlide> <divnumele clasei="element">Elementul 4div></SwiperSlide>
</Swiper>
</div>
);
}
exportMod implicit Aplicație;
Folosind Redare automata prop, puteți specifica întârziere; în acest caz, este setat la 3000 de milisecunde.
Configurarea interfețelor glisabile cu paginare
Un alt modul Swiper important este Paginare. The Paginare modulul vă permite să adăugați marcatori de paginare sau indicatori de bară de progres la glisor, oferind utilizatorilor o reprezentare vizuală a numărului de diapozitive și a poziției lor curente în glisor.
Pentru a utiliza Paginare modul, trebuie să îl importați și să îl includeți în module prop de la Swiper componenta:
import Reacţiona din"reacţiona";
import { Swiper, SwiperSlide } din„swiper/react”;
import { Paginare } din"swiper";
import"swiper/css";
import„swiper/css/pagination”;funcţieApp() {
întoarcere (
spaceBetween={30}
slidesPerView={2}
modules={[Paginare]}
bucla={Adevărat}
pagination={{ pe care se poate face clic: Adevărat }}
><divnumele clasei="element">Elementul 1div></SwiperSlide> <divnumele clasei="element">Elementul 2div></SwiperSlide> <divnumele clasei="element">Elementul 3div></SwiperSlide> <divnumele clasei="element">Elementul 4div></SwiperSlide>
</Swiper>
</div>
);
}
exportMod implicit Aplicație;
Acest bloc de cod oferă funcționalitatea de paginare cu Paginare modul. De asemenea, permite utilizatorilor să facă clic pe paginare gloanțe prin setarea pe care se poate face clic proprietatea paginare prop la adevărat.
Pe lângă biblioteca Swiper paginare modul, reacţionaţi-paginaţi este o altă opțiune excelentă pentru crearea de paginare în aplicația dvs. React.
Crearea de aplicații accesibile cu React
Interfețele cu glisare îmbunătățesc experiența utilizatorului aplicației dvs. pentru utilizatorii de ecran tactil. Swiper oferă multă flexibilitate și îl puteți personaliza cu ușurință în funcție de nevoile aplicației dvs.
Diverse biblioteci UI vă pot ajuta să faceți aplicațiile dvs. React mai accesibile. Aceste biblioteci oferă caracteristici și funcționalități care îmbunătățesc experiența utilizatorului aplicației dvs.
