Introduction

In the upcoming ZK 6.5, we will introduce a new component called ‘Cardlayout’ enabling end-users to switch components like switching cards. On tablet, this navigation operation is supported by simply swiping through components.

Check out the demo below to see how it works exactly!

Live Demo

Implementation

Like HBox or Hlyout, developers can add any component to Cardlayout. The value of selectedIndex decides which component will be shown on the screen, when next() or previous() is called, the value of selectedIndex will change and hence the view on the screen.

	<cardlayout id="card" width="300px" height="300px" selectedIndex="1">
		<window title="Window Component" border="normal" 
		 width="200px">width: 200px</window>
		<window title="Window Component" border="normal" 
		 width="300px">width: 300px</window>
		<window title="Window Component" border="normal" 
		 width="400px">width: 400px</window>
	</cardlayout>
	<button onClick="card.previous()">previous</button>
	<button onClick="card.next()">next</button>

However, please note that Cardlayout‘s width is fixed and cannot be resized once it has been set initially.
For this reason, see line 4: the width of the component exceeds the width of the cardlayout by 100px, therefore, that 100px on the right of the component will be invisible on the screen.

Tablet experience: ZK 6.5 will handle the swipe action automatically, developer need not to worry anything about it! Yes, it’s this convenient!

Related readings:
ZK 6.5 & responsive design: Desktop and tablet applications from the same codebase
ZK 6.5 & Tablet UI Design
ZK 6.5 Scrollview Component