Сазнајте како ова згодна библиотека може да омогући интерфејс који се може превлачити у вашим апликацијама уз минималан напор.
Како мобилни уређаји постају све популарнији, интерфејси који се могу превлачити су постали стандардни начин интеракције са апликацијама. Интерфејси који се могу превлачити су неопходни за пружање најбољег корисничког искуства мобилним корисницима.
Свипер је разноврсна библиотека која вам омогућава да креирате интерфејсе који се могу превлачити у вашим Реацт апликацијама. Откријте како можете да креирате интерфејсе који се могу превлачити у вашој Реацт апликацији користећи Свипер.
Инсталирање Свипер-а
Свипер је једна од многих библиотека које можете користити да прилагодите своју Реацт апликацију. Да бисте започели са Свипер-ом, потребно је да га инсталирате у своју Реацт апликацију. То можете учинити са следећом наредбом терминала коју треба да покренете у основном директоријуму вашег пројекта:
нпм инсталл свипер
Када инсталирате Свипер, можете га користити у својој апликацији.
Креирање интерфејса који се могу превлачити
Након што инсталирате Свипер у вашу Реацт апликацију, можете креирати интерфејсе који се могу превлачити. Почните са увозом Свипер и СвиперСлиде компоненте из библиотеке Свипер.
Компонента Свипер је основна компонента библиотеке Свипер. Дефинише структуру, понашање и функционалност елемената који се могу превлачити. Компонента СвиперСлиде је подређена компонента компоненте Свипер. Дефинише појединачне слајдове који се налазе у компоненти Свипер.
Ево примера интерфејса који се може превлачити користећи компоненте Свипер и СвиперСлиде:
увоз Реаговати из'реаговати';
увоз { Свипер, СвиперСлиде} из"свипер / реаговати";
увоз'свипер/цсс';функцијаАпликација() {
повратак (<дивНазив класе='елемент'>Елемент 1див></SwiperSlide> <дивНазив класе='елемент'>Елемент 2див></SwiperSlide> <дивНазив класе='елемент'>Елемент 3див></SwiperSlide> <дивНазив класе='елемент'>Елемент 4див></SwiperSlide>
</Swiper>
</div>
)
}
извозУобичајено Апликација
Поред већ Свипер и СвиперСлиде компоненте, овај блок кода увози подразумевани стилски лист за Свипер користећи свипер/цсс модул.
Пример затим обавија компоненту Свипер око четири подређене компоненте СвиперСлиде. Сваки СвиперСлиде садржи а див елемент са Назив класе атрибут. Можете користити цлассНаме за стилизовање див елемената:
.елемент {
инлине-сизе: 100пк;
граница-радијус: 12пк;
паддинг: 1рем;
боја: #333333;
боја позадине: #е2е2е2;
породица фонтова: курзивни;
}
Прилагођавање вашег интерфејса који се може превлачити
Након успешног креирања интерфејса који се може превлачити, можете побољшати његов изглед и функционалност како би одговарао вашим захтевима.
Помоћу Свипер-а можете прилагодити понашање и изглед интерфејса користећи различите опције. Ове опције преносите на Свипер компонента као пропс у Реацт-у:
увоз Реаговати из'реаговати';
увоз { Свипер, СвиперСлиде} из"свипер / реаговати";
увоз'свипер/цсс';функцијаАпликација() {
повратак (
спацеБетвеен={30}
слидесПерВиев={2}
лооп={ истина }
><дивНазив класе='елемент'>Елемент 1див></SwiperSlide> <дивНазив класе='елемент'>Елемент 2див></SwiperSlide> <дивНазив класе='елемент'>Елемент 3див></SwiperSlide> <дивНазив класе='елемент'>Елемент 4див></SwiperSlide>
</Swiper>
</div>
)
}
извозУобичајено Апликација
У овом примеру, компонента Свипер узима три реквизита: спацеБетвеен, слидесПерВиев, и петља. Тхе спацеБетвеен проп поставља размак између сваког слајда, у овом случају 30 пиксела.
Помоћу слидесПерВиев проп, можете подесити број видљивих слајдова одједном. У овом случају, слидесПерВиев проп је постављен на 2 што доводи до Свипер компонента за приказивање два слајда истовремено.
На крају, петља проп одређује да ли слајдови треба да се врте бесконачно или не. У овом примеру, слајдови ће се вртети бесконачно јер петља вредност реквизита је истина.
Конфигурисање интерфејса који се могу превлачити помоћу модула
Можете даље да конфигуришете понашање свог интерфејса који се може превлачити помоћу ЈаваСцрипт модули обезбедила библиотека Свипер. Неки од модула које пружа су Навигација, Аутоматско покретање, Пагинација, и Трака за померање.
Да бисте користили било који од ових модула у својој апликацији, морате их увести из библиотеке Свипер. Такође би требало да увезете одговарајуће ЦСС стилове за модуле и проследите њихова имена у Свипер компонента помоћу модула проп.
На пример, овако можете да користите Навигација модул за конфигурисање интерфејса који се могу превлачити:
увоз Реаговати из"реаговати";
увоз { Свипер, СвиперСлиде } из"свипер / реаговати";
увоз { Навигација } из"свипер";
увоз"свипер/цсс";
увоз"свипер/цсс/навигатион";функцијаАпликација() {
повратак (
спацеБетвеен={30}
слидесПерВиев={2}
модули={[Навигација]}
лооп={истина}
навигатион={истина}
><дивНазив класе="елемент">Елемент 1див></SwiperSlide> <дивНазив класе="елемент">Елемент 2див></SwiperSlide> <дивНазив класе="елемент">Елемент 3див></SwiperSlide> <дивНазив класе="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
извозУобичајено Апликација;
Овај блок кода увози Навигација модул и његов ЦСС стил, затим специфицира модул у модула проп оф тхе Свипер саставни део. Тхе модула проп омогућава и конфигурише модуле које обезбеђује библиотека Свипер.
Модул за навигацију обезбеђује функционалност навигације компоненти Свипер. Додаје претходну и следећу дугмад са стрелицама на које можете да кликнете или додирнете да бисте прешли на претходни или следећи слајд.
Тхе навигација вредност проп је тачна што ће проузроковати да се претходно и следеће дугме прикажу на екрану.
Конфигурисање интерфејса који се могу превлачити помоћу аутоматске репродукције
Тхе Аутоматско покретање модул омогућава клизачу да аутоматски прелази између слајдова без интеракције корисника.
Ево примера како да конфигуришете свој интерфејс који се може превлачити користећи Аутоматско покретање модул:
увоз Реаговати из"реаговати";
увоз { Свипер, СвиперСлиде } из"свипер / реаговати";
увоз { Аутоматско покретање } из"свипер";
увоз"свипер/цсс";
увоз"свипер/цсс/аутоплаи";функцијаАпликација() {
повратак (
спацеБетвеен={30}
слидесПерВиев={2}
модулес={[Аутоплаи]}
лооп={истина}
аутоплаи={{ кашњење: 3000 }}
><дивНазив класе="елемент">Елемент 1див></SwiperSlide> <дивНазив класе="елемент">Елемент 2див></SwiperSlide> <дивНазив класе="елемент">Елемент 3див></SwiperSlide> <дивНазив класе="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
извозУобичајено Апликација;
Помоћу аутоматско покретање проп, можете одредити кашњење; у овом случају, постављено је на 3000 милисекунди.
Конфигурисање интерфејса који се могу превлачити помоћу пагинације
Још један важан Свипер модул је Пагинација. Тхе Пагинација модул вам омогућава да додате ознаке за пагинацију или индикаторе траке напретка на клизач, дајући корисницима визуелни приказ броја слајдова и њихове тренутне позиције унутар клизача.
Да бисте користили Пагинација модул, потребно је да га увезете и укључите у модула проп оф тхе Свипер саставни део:
увоз Реаговати из"реаговати";
увоз { Свипер, СвиперСлиде } из"свипер / реаговати";
увоз { Пагинација } из"свипер";
увоз"свипер/цсс";
увоз"свипер/цсс/пагинатион";функцијаАпликација() {
повратак (
спацеБетвеен={30}
слидесПерВиев={2}
модулес={[Пагинација]}
лооп={истина}
пагинатион={{ кликнути: истина }}
><дивНазив класе="елемент">Елемент 1див></SwiperSlide> <дивНазив класе="елемент">Елемент 2див></SwiperSlide> <дивНазив класе="елемент">Елемент 3див></SwiperSlide> <дивНазив класе="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
извозУобичајено Апликација;
Овај блок кода обезбеђује функционалност пагинације са Пагинација модул. Такође омогућава корисницима да кликну на пагинација метке постављањем на кликнути власништво тхе пагинација поткрепити истинитим.
Поред библиотеке Свипер пагинација модул, реаговати-пагинирати је још једна одлична опција за креирање пагинације у вашој Реацт апликацији.
Изградња приступачних апликација помоћу Реацт-а
Интерфејси који се могу превлачити побољшавају корисничко искуство ваше апликације за кориснике екрана осетљивог на додир. Свипер нуди доста флексибилности и лако га можете прилагодити потребама ваше апликације.
Различите УИ библиотеке могу помоћи да ваше Реацт апликације буду приступачније. Ове библиотеке пружају функције и функционалност које побољшавају корисничко искуство ваше апликације.
