Win SlideScreen
WinnetouJs has native integration with NodeJs modules, since WBR also scans the node_modules directories to compile its constructos. That way it is easy to create and publish constructos in npm and win-slidescreen is one of them. Made to create mobile application interfaces, win-slidescreen offers everything you need to create web applications with multiple screens, which slides on the user's screen.
Installing
npm i win-slidescreen;
node wbr --bundleRelease;
Importing
Once installed and compiled, you must import it.
// to use in mobile version use 'SlideScreenMobile' instead.
import { SlideScreen } from "../node_modules/win-slidescreen/src/slideScreen.js";
import { screen, slideScreen } from "./constructos/slideScreen.js";
Note that the functions are imported directly from node_modules and the constructos from the constructosOut folder, defined in win.config.js, because WBR will transpile constructos in node_modules and put it in ./constructos output folder. The slidescreen is composed of a parent container that houses all the child screens.
Create
To create the parent container, use the slidescreen() function.
const container = slideScreen().create("#app");
// Now create the child screens
// that will house the content of the app.
mainPage = screen().create(container.ids.slideScreen);
profilePage = screen().create(container.ids.slideScreen);
menuPage = screen().create(container.ids.slideScreen);
Make
And then make the magic happen with the make() function.
// do not use query selector. Always use pure ids.
SlideScreen.make(container.ids.slideScreen, "app");
Scroll
To scroll between pages, use scroll()
.
SlideScreen.scroll(profilePage.ids.screen);