How to use Framework7 components

Hi i am new to Framework7,

i am building an app in a studio that already has cordova.js, and a page system, i simply want to use components (for example: left panel,swipeout,tabs) with its html, css and js.

can anyone help?

I have successfully integrated swiper ( which is part of Framework7 but i need to use some if not all of the other components.

Thanks in advance.

Best way to start is to study the templates which demonstrate the use of F7 widgets. The single View template is a good starting point.
Ps, I intentionally use the term widget here because there is also something like a (router) component or component template in F7.

Thanks Eric, i am doing that as well, i have been able to create parts of some components (hide nave bar on scroll, list, swipeable tabs).

Taking the swipeable tabs:

when i click on the tab because i have added “data-pagination=’{“el”: “.swiper-pagination”}’” to the Toolbar

and added this script

var swiper = new Swiper(’.swiper-container’, {
pagination: {
el: ‘.swiper-pagination’,

The issue is when i swipe it only swipes the container or content but it does not change the Tab number on the toolbar to active.

Can you advise?

Find attached

Framework7 components can’t be used without Framework7 and its router/navigation system

Yes, i am using F7.js and F7.css as my global script and stylesheet in a studio