Sample UI Design Part 1 : ZK Version 8.5



        

Example for Horizontal Form Design


image

Download zul file



Example for Vertical Form Design

image

Download zul file



Example for Vertical Form Design Label on Left

image

Download zul file



Example for ZK Panel Component
https://www.zkoss.org/wiki/ZK_Component_Reference/Containers/Panel

image
Download zul file


Example for Grid Col span

image

Download zul file



Example for Radio Button and Check Boxes


image

Download zul file



Example for Group Box

A group box is used to group components together. A border is typically drawn around the components to show that they are related. The label across the top of the group box can be created by using Caption component. It works much like the HTML legend element.

image

Download zul file



Example for Date Box, intBox, DecimalBox and TimeBox
https://www.zkoss.org/wiki/ZK%20Component%20Reference/Input/Datebox
https://www.zkoss.org/wiki/ZK%20Component%20Reference/Input/Intbox
https://www.zkoss.org/wiki/ZK%20Component%20Reference/Input/Decimalbox
https://www.zkoss.org/wiki/ZK%20Component%20Reference/Input/Timebox


image

Download zul file