Cover image preview Cover image

Adding a ViewPager to your web app

by Gene — posted on 29 July 2018
Though the topic covered on this post might still be actual, this content referrers to an older version of zuix.js library. See zuix.js website for up-to-date documentation.

What is a ViewPager?

As described in Android Developers documentation, a ViewPager is a

Layout manager that allows the user to flip left and right through pages of data.

Usage

Include zuix.js in the head section of the page:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.0.0/js/zuix.min.js"></script>

Add the ViewPager as described below:

<div data-ui-load="@lib/controllers/view_pager"
data-o-paging="true">

<div><!-- Add page 1 content here --></div>
<div><!-- Add page 2 content here --></div>
<div><!-- Add page 3 content here --></div>
<!-- etc.. -->
</div>

Example application

The example app design was initially inspired to Twitter mobile but it can be used and adapted as a starting base for different kind of projects.

Web App 4-1

Design summary:

Fully playable source on Glitch:

I recommend trying this example also full screen with the direct link zuix-app-4.glitch.me.

Structure

The app consists of a main index and the following elements:

// a small component implementing a 'card'
// with a picture and random data

components/random_item.css
components/random_item.html
components/random_item.js

// a static list used in each ViewPager page and
// that holds a bunch of lazy-loaded 'random_item'

content/fake_list.css
content/fake_list.html

// the menu used in the side `drawer_layout'

content/user_menu.css
content/user_menu.html

// the header bar with a title, clickable
// user profile avatar and sections names

layout/header.css
layout/header.html

// a footer bar with links to main app screens

layout/footer.css
layout/footer.html

// the main app files

index.css
index.html
index.js

So, the index.html page includes:

I hope this make sense =) and that the code is easy to understand even for a beginner. If not, feel free to leave a comment, I'll do my best to improve this.

Further reading:

-~=(glabs.it)=~- Home | Posts | About |