Navbar"

From Documentation
Line 55: Line 55:
 
| <center>false</center>
 
| <center>false</center>
 
| <center>horizontal</center>
 
| <center>horizontal</center>
|[[Image:ZKComRef_Nav_Hor.png]]
+
|[[Image:ZKComRef_Nav_hor.png]]
 
|-
 
|-
 
| <center>true</center>
 
| <center>true</center>
Line 61: Line 61:
 
|[[Image:ZKComRef_Nav_Ver_Cld.png]]
 
|[[Image:ZKComRef_Nav_Ver_Cld.png]]
 
|-
 
|-
| <center>true</center>
+
| <center>false</center>
 
| <center>vertical</center>
 
| <center>vertical</center>
|[[Image:ZKComRef_Nav_Ver.png]]
+
|[[Image:ZKComRef_Nav.png]]
 
|}
 
|}
  

Revision as of 10:04, 15 October 2013

Navbar

  • Demonstration:
  • Java API: Navbar
  • JavaScript API: Navbar
  • Style Guide:
    • Available for ZK:
    • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

    Employment/Purpose

    Provide a roadmap to help user navigate through website. It's a container that usually contains nav elements.

    Example

    ZKComRef Nav.png

    <navbar orient="vertical" width="200px">
    	<navitem label="Home" iconSclass="z-icon-home" />
    	<nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
    		<navitem label="Step One" />
    		<navitem label="Step Two" />
    		<navitem label="Step Three" />
    	</nav>
    	<navitem label="About" iconSclass="z-icon-flag" />
    	<navitem label="Contact" iconSclass="z-icon-envelope"/>
    </navbar>
    

    Properties

    Orient

    A navbar could be placed in a vertical or horizontal orientation, the orient attribute decides.

    Orient
    Snapshot
    horizontal
    ZKComRef Nav hor.png
    vertical
    ZKComRef Nav.png

    Collapsed

    A navbar could be collapsed.

    Collapsed
    Orient
    Snapshot
    true
    horizontal
    ZKComRef Nav Hor Cld.png
    false
    horizontal
    ZKComRef Nav hor.png
    true
    vertical
    ZKComRef Nav Ver Cld.png
    false
    vertical
    ZKComRef Nav.png

    Supported Events

    Name
    Event Type
    onSelect
    Event: SelectEvent

    Notifies one that the user has selected a navitem in the navbar.

    Supported Children

    * Nav,  Navitem
    

    Use Cases

    Version Description Example Location
         

    Version History

    Last Update : 2013/10/15


    Version Date Content
    7.0.0 August, 2013 Navbar was introduced.



    Last Update : 2013/10/15

    Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.