Zistite, ako môže táto pohodlná knižnica povoliť rozhranie, ktoré možno posúvať prstom vo vašich aplikáciách s minimálnym úsilím.
Ako sa mobilné zariadenia stávajú čoraz obľúbenejšími, swipeable rozhrania sa stali štandardným spôsobom interakcie s aplikáciami. Rozhrania s možnosťou posúvania prstom sú nevyhnutné na poskytovanie čo najlepšieho používateľského zážitku pre mobilných používateľov.
Swiper je všestranná knižnica, ktorá vám umožňuje vytvárať rozhrania s možnosťou posúvania v aplikáciách React. Zistite, ako môžete vo svojej aplikácii React vytvoriť rozhrania s možnosťou posúvania prstom pomocou funkcie Swiper.
Inštalácia Swiper
Swiper je jednou z mnohých knižníc, ktoré môžete použiť na prispôsobenie aplikácie React. Ak chcete začať s aplikáciou Swiper, musíte si ju nainštalovať do aplikácie React. Môžete to urobiť pomocou nasledujúceho príkazu terminálu, ktorý by ste mali spustiť v koreňovom adresári projektu:
npm install swiper
Po nainštalovaní Swiper ho môžete použiť vo svojej aplikácii.
Vytváranie posúvateľných rozhraní
Po nainštalovaní aplikácie Swiper do aplikácie React môžete vytvárať rozhrania, na ktoré možno posúvať prstom. Začnite importovaním súboru Swiper a SwiperSlide komponenty z knižnice Swiper.
Komponent Swiper je základným komponentom knižnice Swiper. Definuje štruktúru, správanie a funkčnosť prvkov, ktoré možno posúvať prstom. Komponent SwiperSlide je podriadený komponent komponentu Swiper. Definuje jednotlivé snímky, ktoré sa nachádzajú v rámci komponentu Swiper.
Tu je príklad rozhrania s možnosťou posúvania pomocou komponentov Swiper a SwiperSlide:
importovať Reagovať od'reagovať';
importovať { Swiper, SwiperSlide} od"swiper/react";
importovať'swiper/css';funkciuApp() {
vrátiť (<divclassName='element'>Prvok 1div></SwiperSlide> <divclassName='element'>Prvok 2div></SwiperSlide> <divclassName='element'>Prvok 3div></SwiperSlide> <divclassName='element'>Prvok 4div></SwiperSlide>
</Swiper>
</div>
)
}
exportpredvolená App
Navyše k Swiper a SwiperSlide komponenty, tento blok kódu importuje predvolenú šablónu štýlov pre Swiper pomocou swiper/css modul.
Príklad potom obalí komponent Swiper okolo štyroch dcérskych komponentov SwiperSlide. Každý SwiperSlide obsahuje a div prvok s className atribút. Na štýl prvkov div môžete použiť názov triedy:
.element {
inline-size: 100px;
hraničný polomer: 12px;
vypchávka: 1rem;
farba: #333333;
farba pozadia: #e2e2e2;
font-family: kurzíva;
}
Prispôsobenie vášho posúvateľného rozhrania
Po úspešnom vytvorení posúvateľného rozhrania môžete vylepšiť jeho vzhľad a funkčnosť tak, aby vyhovovali vašim požiadavkám.
Pomocou funkcie Swiper môžete prispôsobiť správanie a vzhľad rozhrania pomocou rôznych možností. Tieto možnosti odovzdáte Swiper komponent ako rekvizity v Reacte:
importovať Reagovať od'reagovať';
importovať { Swiper, SwiperSlide} od"swiper/react";
importovať'swiper/css';funkciuApp() {
vrátiť (
medzera medzi={30}
slidesPerView={2}
slučka={ pravda }
><divclassName='element'>Prvok 1div></SwiperSlide> <divclassName='element'>Prvok 2div></SwiperSlide> <divclassName='element'>Prvok 3div></SwiperSlide> <divclassName='element'>Prvok 4div></SwiperSlide>
</Swiper>
</div>
)
}
exportpredvolená App
V tomto príklade má komponent Swiper tri rekvizity: priestor medzi, slidesPerView, a slučka. The priestor medzi prop nastavuje priestor medzi jednotlivými snímkami, v tomto prípade 30 pixelov.
Pomocou slidesPerView rekvizity, môžete nastaviť počet zobrazených snímok naraz. V tomto prípade, slidesPerView prop je nastavený na 2, čo spôsobuje Swiper komponent na zobrazenie dvoch snímok súčasne.
Nakoniec, slučka prop určuje, či sa majú snímky opakovať donekonečna alebo nie. V tomto príklade sa snímky budú nekonečne opakovať, pretože slučka prop hodnota je pravda.
Konfigurácia vašich posúvateľných rozhraní pomocou modulov
Môžete ďalej konfigurovať správanie vášho posúvacieho rozhrania pomocou moduly JavaScript poskytuje knižnica Swiper. Niektoré z modulov, ktoré poskytuje, sú Navigácia, Automatické prehrávanie, Stránkovanie, a Posuvník.
Ak chcete použiť ktorýkoľvek z týchto modulov vo svojej aplikácii, musíte ich importovať z knižnice Swiper. Mali by ste tiež importovať zodpovedajúce štýly CSS pre moduly a odovzdať ich názvy do Swiper komponent pomocou modulov rekvizita.
Takto môžete napríklad použiť Navigácia modul na konfiguráciu vašich posúvateľných rozhraní:
importovať Reagovať od"reagovať";
importovať { Swiper, SwiperSlide } od"swiper/react";
importovať { Navigácia } od"swiper";
importovať"swiper/css";
importovať"swiper/css/navigation";funkciuApp() {
vrátiť (
medzera medzi={30}
slidesPerView={2}
modules={[Navigation]}
slučka={pravda}
navigácia={pravda}
><divclassName="element">Prvok 1div></SwiperSlide> <divclassName="element">Prvok 2div></SwiperSlide> <divclassName="element">Prvok 3div></SwiperSlide> <divclassName="element">Prvok 4div></SwiperSlide>
</Swiper>
</div>
);
}
exportpredvolená App;
Tento blok kódu importuje súbor Navigácia modul a jeho štýl CSS, potom špecifikuje modul v modulov opora z Swiper komponent. The modulov prop povoľuje a konfiguruje moduly poskytované knižnicou Swiper.
Navigačný modul poskytuje navigačné funkcie komponentu Swiper. Pridáva predchádzajúce a nasledujúce tlačidlá so šípkami, na ktoré môžete kliknúť alebo klepnúť a presunúť sa na predchádzajúcu alebo nasledujúcu snímku.
The navigácia hodnota prop je true, čo spôsobí, že sa na obrazovke zobrazia predchádzajúce a nasledujúce tlačidlá.
Konfigurácia rozhraní s možnosťou automatického prehrávania
The Automatické prehrávanie modul umožňuje posúvačovi automaticky prechádzať medzi snímkami bez zásahu používateľa.
Tu je príklad, ako nakonfigurovať rozhranie s možnosťou posúvania prstom pomocou Automatické prehrávanie modul:
importovať Reagovať od"reagovať";
importovať { Swiper, SwiperSlide } od"swiper/react";
importovať { Automatické prehrávanie } od"swiper";
importovať"swiper/css";
importovať"swiper/css/autoplay";funkciuApp() {
vrátiť (
medzera medzi={30}
slidesPerView={2}
modules={[Automatické prehrávanie]}
slučka={pravda}
automatické prehrávanie={{ meškanie: 3000 }}
><divclassName="element">Prvok 1div></SwiperSlide> <divclassName="element">Prvok 2div></SwiperSlide> <divclassName="element">Prvok 3div></SwiperSlide> <divclassName="element">Prvok 4div></SwiperSlide>
</Swiper>
</div>
);
}
exportpredvolená App;
Pomocou automatické prehrávanie podperu, môžete špecifikovať meškanie; v tomto prípade je nastavená na 3000 milisekúnd.
Konfigurácia swipeable rozhraní so stránkovaním
Ďalším dôležitým modulom Swiper je Stránkovanie. The Stránkovanie modul vám umožňuje pridať do posúvača odrážky stránkovania alebo indikátory indikátora priebehu, čo používateľom poskytuje vizuálnu reprezentáciu počtu snímok a ich aktuálnej polohy v rámci posúvača.
Ak chcete použiť Stránkovanie modul, musíte ho importovať a zahrnúť do modulov opora z Swiper komponent:
importovať Reagovať od"reagovať";
importovať { Swiper, SwiperSlide } od"swiper/react";
importovať { Stránkovanie } od"swiper";
importovať"swiper/css";
importovať"swiper/css/pagination";funkciuApp() {
vrátiť (
medzera medzi={30}
slidesPerView={2}
moduly={[Paginácia]}
slučka={pravda}
stránkovanie={{ klikateľné: pravda }}
><divclassName="element">Prvok 1div></SwiperSlide> <divclassName="element">Prvok 2div></SwiperSlide> <divclassName="element">Prvok 3div></SwiperSlide> <divclassName="element">Prvok 4div></SwiperSlide>
</Swiper>
</div>
);
}
exportpredvolená App;
Tento blok kódu poskytuje funkciu stránkovania s Stránkovanie modul. Umožňuje tiež používateľom kliknúť na stránkovanie guľky nastavením klikateľné majetok z stránkovanie podpera na pravdu.
Okrem knižnice Swiper stránkovanie modul, reagovať-stránkovať je ďalšou vynikajúcou možnosťou na vytváranie stránkovania vo vašej aplikácii React.
Vytváranie prístupných aplikácií pomocou React
Posúvateľné rozhrania zlepšujú používateľskú skúsenosť s vašou aplikáciou pre používateľov dotykovej obrazovky. Swiper ponúka dostatok flexibility a môžete si ho ľahko prispôsobiť podľa potrieb vašej aplikácie.
Rôzne knižnice používateľského rozhrania vám môžu pomôcť sprístupniť vaše aplikácie React. Tieto knižnice poskytujú funkcie a funkcie, ktoré zlepšujú používateľský zážitok z vašej aplikácie.
