Nav

From Documentation

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" 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

    Badge Text

    This property set the badge text for the Nav. For example, Nav Get Started 's contains three Navitem components - Step One, Step Two, Step Three. So we can set Get Started 's badgeText to "3" to display the number of children. The code snippets as shown below:

    ZKComRef Nav badgeText.png
    <nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
    	<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,
    

    Navseparator

    Use Cases

    Version Description Example Location
         

    Version History

    Last Update : 2013/10/17


    Version Date Content
    7.0.0 August, 2013 Nav was introduced.



    Last Update : 2013/10/17

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