Version 2
What is new? Migration Guide From V1
Getting Started
Understanding WinnetouJs Setting Up
Constructos
Creating Constructos Advanced Options Lazy Loading
Mutables
Constructos State Management Case: Custom State Management System Winnetou FX
Addons
Winnetou Selectors Winnetou Router App Translations CSS Sass Built-in Transpiler SVG Icons Color Themes
Extras
Useful JsDoc Syntax
Plugins
Creating Plugins SlideScreen Official Plugin Animate Official Plugin
Compiling to Production
WBR
API Change Log Git Hub Pull Requests Guidelines Get in touch
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);