Navbar

From Documentation
Revision as of 08:30, 8 July 2022 by Hawk (talk | contribs) (→‎Autoclose)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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 can be collapsed, the collapsed attribute decides.

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

    Autoclose

    Since 8.0.4 By default only a single nav-element is open at any time - automatically closing other nav-elements which are not on the current open path. This behavior can be disabled setting autoclose="false", which keeps nav elements open until they are clicked again by the user.

    	<navbar orient="vertical" autoclose="false">
    		<nav label="nav 1">
    			<navitem label="nav 1.1"/>
    			<navitem label="nav 1.2"/>
    		</nav>
    		<nav label="nav 2">
    			<navitem label="nav 2.1"/>
    			<navitem label="nav 2.2"/>
    		</nav>
    	</navbar>
    

    Supported Events

    Name
    Event Type
    onSelect
    Event: SelectEvent

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

    Supported Children

    * Nav,  Navitem, Navseparator
    

    Use Cases

    Version Description Example Location
         

    Version History

    Last Update : 2022/07/08


    Version Date Content
    7.0.0 August, 2013 Navbar was introduced.



    Last Update : 2022/07/08

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