Plugins

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.

base.html


        
// 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.

app.js


        
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.

app.js


        
// do not use query selector. Always use pure ids.
SlideScreen.make(container.ids.slideScreen, "app");

Scroll

To scroll between pages, use scroll().

app.js


        

SlideScreen.scroll(profilePage.ids.screen);