Ontdek hoe deze handige bibliotheek met minimale inspanning een veegbare interface in uw apps mogelijk maakt.
Naarmate mobiele apparaten populairder worden, zijn veegbare interfaces een standaardmanier geworden voor interactie met applicaties. Veegbare interfaces zijn essentieel om mobiele gebruikers de beste gebruikerservaring te bieden.
Swiper is een veelzijdige bibliotheek waarmee u veegbare interfaces kunt maken in uw React-applicaties. Ontdek hoe u veegbare interfaces kunt maken in uw React-applicatie met behulp van Swiper.
Swiper installeren
Swiper is een van de vele bibliotheken die u kunt gebruiken om uw React-applicatie aan te passen. Om met Swiper aan de slag te gaan, moet u het in uw React-applicatie installeren. U kunt dit doen met de volgende terminalopdracht die u in de hoofdmap van uw project moet uitvoeren:
npm install-swiper
Nadat u Swiper hebt geïnstalleerd, kunt u deze in uw toepassing gebruiken.
Veegbare interfaces maken
Nadat u Swiper in uw React-applicatie hebt geïnstalleerd, kunt u veegbare interfaces maken. Begin met het importeren van de
Veger En SwiperSlide componenten uit de Swiper-bibliotheek.De Swiper-component is de kerncomponent van de Swiper-bibliotheek. Het definieert de structuur, het gedrag en de functionaliteit van de veegbare elementen. De SwiperSlide-component is een onderliggende component van de Swiper-component. Het definieert individuele dia's die zich binnen de Swiper-component bevinden.
Hier is een voorbeeld van een veegbare interface met behulp van de componenten Swiper en SwiperSlide:
importeren Reageer van'Reageer';
importeren { Swiper, SwiperSlide} van"swiper/reageren";
importeren'swiper/css';functieapp() {
opbrengst (<divnaam van de klasse='element'>Element 1div></SwiperSlide> <divnaam van de klasse='element'>Element 2div></SwiperSlide> <divnaam van de klasse='element'>Element 3div></SwiperSlide> <divnaam van de klasse='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
exporterenstandaard app
Naast de Veger En SwiperSlide componenten, importeert dit codeblok de standaard stylesheet voor Swiper met behulp van de swiper/css moduul.
Het voorbeeld wikkelt vervolgens een Swiper-component rond vier SwiperSlide-kindcomponenten. Elke SwiperSlide bevat een div onderdeel met de naam van de klasse attribuut. U kunt de className gebruiken om de div-elementen op te maken:
.element {
inline-formaat: 100px;
grensradius: 12px;
opvulling: 1rem;
kleur: #333333;
Achtergrond kleur: #e2e2e2;
font-familie: cursief;
}
Uw veegbare interface aanpassen
Nadat u met succes een veegbare interface hebt gemaakt, kunt u het uiterlijk en de functionaliteit verbeteren om aan uw eisen te voldoen.
Met Swiper kunt u het gedrag en uiterlijk van de interface met verschillende opties aanpassen. Deze opties geef je door aan de Veger bestanddeel als rekwisieten in Reageren:
importeren Reageer van'Reageer';
importeren { Swiper, SwiperSlide} van"swiper/reageren";
importeren'swiper/css';functieapp() {
opbrengst (
spatieTussen={30}
slidesPerView={2}
lus={ WAAR }
><divnaam van de klasse='element'>Element 1div></SwiperSlide> <divnaam van de klasse='element'>Element 2div></SwiperSlide> <divnaam van de klasse='element'>Element 3div></SwiperSlide> <divnaam van de klasse='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
exporterenstandaard app
In dit voorbeeld bevat de Swiper-component drie rekwisieten: ruimte tussen, slidesPerView, En lus. De ruimte tussen prop stelt de ruimte tussen elke dia in, in dit geval 30 pixels.
De... gebruiken slidesPerView prop, kunt u het aantal dia's dat tegelijk zichtbaar is instellen. In dit geval de slidesPerView prop is ingesteld op 2 waardoor de Veger component om twee dia's tegelijk weer te geven.
Als laatste de lus prop specificeert of de dia's oneindig moeten herhalen of niet. In dit voorbeeld lopen de dia's oneindig door omdat de lus propwaarde is WAAR.
Uw veegbare interfaces configureren met modules
U kunt het gedrag van uw veegbare interface verder configureren met JavaScript-modules geleverd door de Swiper-bibliotheek. Sommige van de modules die het biedt zijn Navigatie, Automatisch afspelen, Paginering, En Schuifbalk.
Als u een van deze modules in uw toepassing wilt gebruiken, moet u deze importeren uit de Swiper-bibliotheek. U moet ook de bijbehorende CSS-stijlen voor de modules importeren en hun namen doorgeven aan de Veger onderdeel met behulp van de modules prop.
Zo kun je bijvoorbeeld de Navigatie module om uw veegbare interfaces te configureren:
importeren Reageer van"Reageer";
importeren { Swiper, SwiperSlide } van"swiper/reageren";
importeren { Navigatie } van"veegmachine";
importeren"swiper/css";
importeren"swiper/css/navigatie";functieapp() {
opbrengst (
spatieTussen={30}
slidesPerView={2}
modules={[Navigatie]}
lus={WAAR}
navigatie={WAAR}
><divnaam van de klasse="element">Element 1div></SwiperSlide> <divnaam van de klasse="element">Element 2div></SwiperSlide> <divnaam van de klasse="element">Element 3div></SwiperSlide> <divnaam van de klasse="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
exporterenstandaard App;
Dit codeblok importeert het Navigatie module en zijn CSS-stijl, specificeert vervolgens de module in het modules prop van de Veger bestanddeel. De modules prop activeert en configureert modules die door de Swiper-bibliotheek worden geleverd.
De navigatiemodule biedt navigatiefunctionaliteit voor de Swiper-component. Het voegt vorige en volgende pijlknoppen toe waarop u kunt klikken of tikken om naar de vorige of volgende dia te gaan.
De navigatie prop-waarde waar is, waardoor de vorige en volgende knoppen op het scherm worden weergegeven.
Veegbare interfaces configureren met AutoPlay
De Automatisch afspelen Met deze module kan de schuifregelaar automatisch tussen dia's wisselen zonder tussenkomst van de gebruiker.
Hier is een voorbeeld van hoe u uw veegbare interface configureert met behulp van de Automatisch afspelen moduul:
importeren Reageer van"Reageer";
importeren { Swiper, SwiperSlide } van"swiper/reageren";
importeren { Automatisch afspelen } van"veegmachine";
importeren"swiper/css";
importeren"swiper/css/autoplay";functieapp() {
opbrengst (
spatieTussen={30}
slidesPerView={2}
modules={[Autoplay]}
lus={WAAR}
automatisch afspelen={{ vertraging: 3000 }}
><divnaam van de klasse="element">Element 1div></SwiperSlide> <divnaam van de klasse="element">Element 2div></SwiperSlide> <divnaam van de klasse="element">Element 3div></SwiperSlide> <divnaam van de klasse="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
exporterenstandaard App;
De... gebruiken automatisch afspelen prop, kunt u de vertraging; in dit geval is het ingesteld op 3000 milliseconden.
Veegbare interfaces configureren met paginering
Een andere belangrijke Swiper-module is Paginering. De Paginering Met de module kunt u opsommingstekens voor paginering of voortgangsbalkindicatoren aan de schuifregelaar toevoegen, waardoor gebruikers een visuele weergave krijgen van het aantal dia's en hun huidige positie binnen de schuifregelaar.
Om de Paginering module, moet u deze importeren en opnemen in het modules prop van de Veger bestanddeel:
importeren Reageer van"Reageer";
importeren { Swiper, SwiperSlide } van"swiper/reageren";
importeren { Paginering } van"veegmachine";
importeren"swiper/css";
importeren"swiper/css/paginering";functieapp() {
opbrengst (
spatieTussen={30}
slidesPerView={2}
modules={[Paginering]}
lus={WAAR}
paginering={{ klikbaar: WAAR }}
><divnaam van de klasse="element">Element 1div></SwiperSlide> <divnaam van de klasse="element">Element 2div></SwiperSlide> <divnaam van de klasse="element">Element 3div></SwiperSlide> <divnaam van de klasse="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
exporterenstandaard App;
Dit codeblok biedt de pagineringsfunctionaliteit met de Paginering moduul. Het stelt gebruikers ook in staat om op de paginering opsommingstekens door de klikbaar eigendom van de paginering prop naar waar.
Naast de Swiper-bibliotheek paginering moduul, reageren-pagineren is een andere uitstekende optie voor het maken van paginering in uw React-toepassing.
Toegankelijke applicaties bouwen met React
Veegbare interfaces verbeteren de gebruikerservaring van uw applicatie voor touchscreen-gebruikers. Swiper biedt veel flexibiliteit en u kunt het eenvoudig aanpassen aan de behoeften van uw app.
Verschillende UI-bibliotheken kunnen helpen om uw React-applicaties toegankelijker te maken. Deze bibliotheken bieden functies en functionaliteit die de gebruikerservaring van uw toepassing verbeteren.
