Navbar"

From Documentation
(Created page with "= Nav = *Demonstration: *Java API: *JavaScript API: *Style Guide: = Employment/Purpose = Provide a roadmap to help user navigate through website. It's a container that usu...")
 
 
(34 intermediate revisions by 5 users not shown)
Line 1: Line 1:
= Nav =
+
{{ZKComponentReferencePageHeader}}
 +
 
 +
= Navbar =
  
 
*Demonstration:  
 
*Demonstration:  
*Java API:  
+
*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Navbar.html Navbar]
*JavaScript API:  
+
*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/nav/Navbar.html Navbar]
*Style Guide:  
+
*Style Guide:
 +
*{{ZK EE}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 11: Line 14:
  
 
= 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" 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>
 +
</source>
  
 
= Properties =
 
= Properties =
 +
 +
== Orient ==
 +
A <code>navbar</code> could be placed in a vertical or horizontal orientation, the <code>orient</code> attribute decides.
 +
{| class='wikitable' | width="100%"
 +
! <center>Orient</center>
 +
! <center>Snapshot</center>
 +
|-
 +
| <center>horizontal</center>
 +
| [[Image:ZKComRef_Nav_hor.png]]
 +
|-
 +
|<center>vertical</center>
 +
|[[Image:ZKComRef_Nav.png]]
 +
|}
 +
 +
== Collapsed ==
 +
A <code>navbar</code> can be collapsed, the <code>collapsed</code> attribute decides.
 +
{| class='wikitable' | width="100%"
 +
! <center>Collapsed</center>
 +
! <center>Orient</center>
 +
! <center>Snapshot</center>
 +
|-
 +
| <center>true</center>
 +
| <center>horizontal</center>
 +
|[[Image:ZKComRef_Nav_Hor_Cld.png]]
 +
|-
 +
| <center>false</center>
 +
| <center>horizontal</center>
 +
|[[Image:ZKComRef_Nav_Hor_No.png]]
 +
|-
 +
| <center>true</center>
 +
| <center>vertical</center>
 +
|[[Image:ZKComRef_Nav_Ver_Cld.png]]
 +
|-
 +
| <center>false</center>
 +
| <center>vertical</center>
 +
|[[Image:ZKComRef_Nav_Ver_No.png]]
 +
|}
 +
== Autoclose ==
 +
{{versionSince| 8.0.4}}
 +
By default only a single <code>nav</code>-element is open at any time - automatically closing other <code>nav</code>-elements which are not on the current open path.
 +
This behavior can be disabled setting <code>autoclose="false"</code>, which keeps nav elements open until they are clicked again by the user.
 +
 +
<source lang="xml" highlight="1">
 +
<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>
 +
</source>
  
 
= Supported Events =
 
= Supported Events =
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onSelect</tt></center>
+
| <center><code>onSelect</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>
 
Notifies one that the user has selected a navitem in the navbar.
 
Notifies one that the user has selected a navitem in the navbar.
Line 28: Line 99:
 
= Supported Children =
 
= Supported Children =
  
  *[[ZK Component Reference/Essential Components/Nav | Nav]], [[ZK Component Reference/Essential Components/Nav/Navitem  | Navitem]]
+
  *[[ZK Component Reference/Essential Components/Nav | Nav]], [[ZK Component Reference/Essential Components/Nav/Navitem  | Navitem]],[[ZK_Component_Reference/Essential_Components/Nav/Navseparator  | Navseparator]]
  
 
= Use Cases =
 
= Use Cases =
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 43: Line 114:
  
 
{{LastUpdated}}
 
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| &nbsp;
+
| 7.0.0
| &nbsp;
+
| August, 2013
| &nbsp;
+
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Navbar.html Navbar] was introduced.
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 08:30, 8 July 2022

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.