Navbar"

From Documentation
Line 12: Line 12:
  
 
= Example =
 
= Example =
 +
[[Image:ZKComRef_Nav.png]]
 +
 +
<source lang="xml" >
 +
<navbar orient="vertical" width="200px">
 +
<navitem label="Home" iconSclass="z-icon-home" />
 +
<nav label="Get Started" iconSclass="z-icon-th-list" detailed="true">
 +
<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>
 +
</source>
  
 
= Properties =
 
= Properties =

Revision as of 06:56, 14 August 2013

Nav

  • Demonstration:
  • Java API:
  • JavaScript API:
  • 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" detailed="true">
		<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

    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/08/14


    Version Date Content
         



    Last Update : 2013/08/14

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


    Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Essential_Components/Nav/Navbar&oldid=38936"