Nav"

From Documentation
m (correct highlight (via JWB))
 
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{ZKComponentReferencePageHeader}}
 +
 
= Nav =
 
= Nav =
  
 
*Demonstration:  
 
*Demonstration:  
−
*Java API: [http://www.zkoss.org/javadoc/7.0.0-Preview/zk/org/zkoss/zkmax/zul/Nav.html Nav]  
+
*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Nav.html Nav]  
−
*JavaScript API: [http://www.zkoss.org/javadoc/7.0.0-Preview/jsdoc/zkmax/nav/Nav.html Nav]  
+
*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/nav/Nav.html Nav]  
 
*Style Guide:
 
*Style Guide:
 
*{{ZK EE}}
 
*{{ZK EE}}
Line 9: Line 11:
 
= Employment/Purpose =
 
= Employment/Purpose =
  
−
A container is used to display <tt>navitem</tt>, it should be placed inside a <tt>navbar</tt>.
+
A container is used to display <code>navitem</code>, it should be placed inside a <code>navbar</code>.
  
 
= Example =
 
= Example =
Line 29: Line 31:
 
= Properties =
 
= Properties =
  
−
== badgeText ==
+
== Badge Text ==
−
This property set the badge text for the <tt>Nav</tt>. For example, <tt>Nav</tt> Get Started 's contains three <tt>Navitem</tt> 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:
+
This property set the badge text for the <code>Nav</code>,it is used to present more details of <code>Nav</code>. For example, a <code>Nav</code> with label "Get Started" contains three <code>Navitem</code> components. If we want to let user know how much items in the <code>Nav</code> without opening it, we can show the children numbers of current <code>Nav</code> by <javadoc class="false" method="setBadgeText(java.lang.String)">org.zkoss.zkmax.zul.Nav</javadoc> API. The code snippets as shown below:
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
−
| [[Image:ZKComRef_Nav_detailed.png]]
+
| [[Image:ZKComRef_Nav_badgeText.png]]
 
|
 
|
−
<source lang="xml" high="1">
+
<source lang="xml" highlight="1">
 
<nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
 
<nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
 
<navitem label="Step One" />
 
<navitem label="Step One" />
Line 46: Line 48:
 
= 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>onOpen</tt></center>
+
| <center><code>onOpen</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>
 
Denotes user has opened or closed a nav component.
 
Denotes user has opened or closed a nav component.
Line 59: Line 61:
 
= 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 74: Line 76:
  
 
{{LastUpdated}}
 
{{LastUpdated}}
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
 
| 7.0.0
 
| 7.0.0
 
| August, 2013
 
| August, 2013
−
| <javadoc>org.zkoss.zkmax.nav.Nav</javadoc> was introduced.
+
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Nav.html Nav] was introduced.
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 09:22, 18 January 2022


DocumentationZK Component ReferenceEssential ComponentsNav
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" 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,it is used to present more details of Nav. For example, a Nav with label "Get Started" contains three Navitem components. If we want to let user know how much items in the Nav without opening it, we can show the children numbers of current Nav by setBadgeText(String) API. 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 : 2022/01/18


    Version Date Content
    7.0.0 August, 2013 Nav was introduced.



    Last Update : 2022/01/18

    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&oldid=53200"