Nav

From Documentation
Revision as of 06:40, 23 September 2013 by Raymondchao (talk | contribs) (→‎Nav)

Nav

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

    Employment/Purpose

    A container is used to display navitem, it should be placed inside a navbar.

    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

    Detailed

    We can show the number of the Navitem inside the Nav. For example, Nav Get Started 's contains three Navitem components - Step One, Step Two, Step Three. when we set Get Started 's detailed to "true". The right hand side of the Nav will display the number. The code snippets as shown below:

    ZKComRef Nav detailed.png
    <nav label="Get Started" iconSclass="z-icon-th-list" detailed="true">
    	<navitem label="Step One" />
    	<navitem label="Step Two" />
    	<navitem label="Step Three" />
    </nav>
    

    Supported Events

    Name
    Event Type
    onOpen
    Event: OpenEvent

    Denotes user has opened or closed a nav component.

    Supported Children

    * Nav,  Navitem
    

    Use Cases

    Version Description Example Location
         

    Version History

    Last Update : 2013/09/23


    Version Date Content
    7.0.0 August, 2013 Nav was introduced.



    Last Update : 2013/09/23

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