Saznajte kako ova praktična biblioteka može omogućiti sučelje koje se može prevlačiti u vašim aplikacijama uz minimalan napor.
Kako mobilni uređaji postaju sve popularniji, sučelja s mogućnošću prevlačenja postala su standardni način interakcije s aplikacijama. Sučelja koja se mogu prevlačiti ključna su za pružanje najboljeg korisničkog iskustva mobilnim korisnicima.
Swiper je svestrana biblioteka koja vam omogućuje stvaranje sučelja koja se mogu prevlačiti u vašim React aplikacijama. Otkrijte kako možete stvoriti sučelja koja se mogu prevlačiti u vašoj React aplikaciji pomoću Swipera.
Instalacija Swipera
Swiper je jedna od mnogih biblioteka koje možete koristiti za prilagodbu svoje React aplikacije. Kako biste počeli koristiti Swiper, morate ga instalirati u svoju React aplikaciju. To možete učiniti pomoću sljedeće naredbe terminala koju trebate pokrenuti u korijenskom direktoriju vašeg projekta:
npm instaliraj swiper
Nakon što instalirate Swiper, možete ga koristiti u svojoj aplikaciji.
Stvaranje sučelja koja se mogu klizati
Nakon što instalirate Swiper u svoju React aplikaciju, možete kreirati sučelja koja se mogu prevlačiti. Počnite s uvozom Swiper i SwiperSlide komponente iz biblioteke Swiper.
Komponenta Swiper osnovna je komponenta biblioteke Swiper. Definira strukturu, ponašanje i funkcionalnost elemenata koji se mogu pomicati. Komponenta SwiperSlide je podređena komponenta komponente Swiper. Definira pojedinačne slajdove koji se nalaze unutar komponente Swiper.
Evo primjera sučelja koje se može prevlačiti koristeći komponente Swiper i SwiperSlide:
uvoz Reagirati iz'reagirati';
uvoz { Swiper, SwiperSlide} iz"swiper/react";
uvoz'swiper/css';funkcijaaplikacija() {
povratak (<divnaziv klase='element'>Element 1div></SwiperSlide> <divnaziv klase='element'>Element 2div></SwiperSlide> <divnaziv klase='element'>Element 3div></SwiperSlide> <divnaziv klase='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
izvozzadano aplikacija
Uz to Swiper i SwiperSlide komponente, ovaj blok koda uvozi zadanu tablicu stilova za Swiper pomoću swiper/css modul.
Primjer zatim omotava komponentu Swiper oko četiri podređene komponente SwiperSlide. Svaki SwiperSlide sadrži div element s naziv klase atribut. Možete koristiti className za stiliziranje div elemenata:
.element {
inline-veličina: 100px;
granični radijus: 12px;
podstava: 1rem;
boja: #333333;
boja pozadine: #e2e2e2;
obitelj-fontova: rukopisni;
}
Prilagodba vašeg sučelja koje se može prevlačiti
Nakon uspješne izrade sučelja koje se može prevlačiti, možete poboljšati njegov izgled i funkcionalnost kako bi odgovarali vašim zahtjevima.
Pomoću Swipera možete prilagoditi ponašanje i izgled sučelja pomoću različitih opcija. Ove opcije prosljeđujete Swiper komponenta kao rekvizite u Reactu:
uvoz Reagirati iz'reagirati';
uvoz { Swiper, SwiperSlide} iz"swiper/react";
uvoz'swiper/css';funkcijaaplikacija() {
povratak (
spaceBetween={30}
slidesPerView={2}
petlja={ pravi }
><divnaziv klase='element'>Element 1div></SwiperSlide> <divnaziv klase='element'>Element 2div></SwiperSlide> <divnaziv klase='element'>Element 3div></SwiperSlide> <divnaziv klase='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
izvozzadano aplikacija
U ovom primjeru, komponenta Swiper ima tri rekvizita: prostorIzmeđu, slidesPerView, i petlja. The prostorIzmeđu prop postavlja razmak između svakog slajda, u ovom slučaju 30 piksela.
Koristiti slidesPerView prop, možete postaviti broj slajdova vidljivih odjednom. U ovom slučaju, slidesPerView prop je postavljen na 2 što uzrokuje Swiper komponenta za prikaz dva slajda istovremeno.
Na kraju, petlja prop specificira trebaju li se slajdovi beskonačno ponavljati ili ne. U ovom primjeru, slajdovi će se beskonačno ponavljati jer petlja prop vrijednost je pravi.
Konfiguriranje vaših prelamajućih sučelja s modulima
Možete dodatno konfigurirati ponašanje svog sučelja koje se može prevlačiti pomoću JavaScript moduli pruža biblioteka Swiper. Neki od modula koje nudi su Navigacija, Auto Play, Paginacija, i Traka za pomicanje.
Da biste koristili bilo koji od ovih modula u svojoj aplikaciji, morate ih uvesti iz biblioteke Swiper. Također biste trebali uvesti odgovarajuće CSS stilove za module i proslijediti njihova imena u Swiper komponenta koja koristi moduli oslonac
Na primjer, ovako možete koristiti Navigacija modul za konfiguriranje vaših sučelja koja se mogu prevlačiti:
uvoz Reagirati iz"reagirati";
uvoz { Swiper, SwiperSlide } iz"swiper/react";
uvoz { Navigacija } iz"swiper";
uvoz"swiper/css";
uvoz"swiper/css/navigacija";funkcijaaplikacija() {
povratak (
spaceBetween={30}
slidesPerView={2}
modules={[Navigacija]}
petlja={pravi}
navigacija={pravi}
><divnaziv klase="element">Element 1div></SwiperSlide> <divnaziv klase="element">Element 2div></SwiperSlide> <divnaziv klase="element">Element 3div></SwiperSlide> <divnaziv klase="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
izvozzadano aplikacija;
Ovaj blok koda uvozi Navigacija modul i njegov CSS stil, zatim specificira modul u moduli oslonac od Swiper komponenta. The moduli prop omogućuje i konfigurira module koje pruža biblioteka Swiper.
Navigacijski modul pruža navigacijsku funkciju Swiper komponenti. Dodaje gumbe sa strelicama za prethodni i sljedeći koje možete kliknuti ili dodirnuti za prelazak na prethodni ili sljedeći slajd.
The navigacija prop vrijednost je istinita što će uzrokovati prikaz prethodnih i sljedećih gumba na ekranu.
Konfiguriranje sučelja s mogućnošću prevlačenja s automatskom reprodukcijom
The Auto Play modul omogućuje klizaču automatski prijelaz između slajdova bez interakcije korisnika.
Evo primjera kako konfigurirati svoje sučelje koje se može prevlačiti pomoću Auto Play modul:
uvoz Reagirati iz"reagirati";
uvoz { Swiper, SwiperSlide } iz"swiper/react";
uvoz { Auto Play } iz"swiper";
uvoz"swiper/css";
uvoz"swiper/css/autoplay";funkcijaaplikacija() {
povratak (
spaceBetween={30}
slidesPerView={2}
modules={[Autoplay]}
petlja={pravi}
autoplay={{ odgoditi: 3000 }}
><divnaziv klase="element">Element 1div></SwiperSlide> <divnaziv klase="element">Element 2div></SwiperSlide> <divnaziv klase="element">Element 3div></SwiperSlide> <divnaziv klase="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
izvozzadano aplikacija;
Koristiti auto Play prop, možete odrediti odgoditi; u ovom slučaju, postavljeno je na 3000 milisekundi.
Konfiguriranje sučelja koja se mogu pomicati s paginacijom
Još jedan važan modul Swiper je Paginacija. The Paginacija modul vam omogućuje dodavanje grafičkih oznaka za označavanje stranica ili indikatora trake napretka na klizač, dajući korisnicima vizualni prikaz broja slajdova i njihov trenutni položaj unutar klizača.
Za korištenje Paginacija modul, morate ga uvesti i uključiti u moduli oslonac od Swiper komponenta:
uvoz Reagirati iz"reagirati";
uvoz { Swiper, SwiperSlide } iz"swiper/react";
uvoz { Paginacija } iz"swiper";
uvoz"swiper/css";
uvoz"swiper/css/pagination";funkcijaaplikacija() {
povratak (
spaceBetween={30}
slidesPerView={2}
modules={[Pagination]}
petlja={pravi}
broj stranica={{ kliknuti: pravi }}
><divnaziv klase="element">Element 1div></SwiperSlide> <divnaziv klase="element">Element 2div></SwiperSlide> <divnaziv klase="element">Element 3div></SwiperSlide> <divnaziv klase="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
izvozzadano aplikacija;
Ovaj blok koda pruža funkcionalnost paginacije s Paginacija modul. Korisnicima također omogućuje klik na paginacija metaka postavljanjem kliknuti vlasništvo od paginacija prop to true.
Uz biblioteku Swiper paginacija modul, reagirati-paginirati je još jedna izvrsna opcija za stvaranje paginacije u vašoj React aplikaciji.
Izrada pristupačnih aplikacija s Reactom
Sučelja koja se mogu klizati poboljšavaju korisničko iskustvo vaše aplikacije za korisnike zaslona osjetljivog na dodir. Swiper nudi mnogo fleksibilnosti i možete ga jednostavno prilagoditi prema potrebama svoje aplikacije.
Razne biblioteke korisničkog sučelja mogu pomoći da vaše React aplikacije budu pristupačnije. Ove biblioteke pružaju značajke i funkcije koje poboljšavaju korisničko iskustvo vaše aplikacije.