Portalchildren"

From Documentation
 
(7 intermediate revisions by 3 users not shown)
Line 46: Line 46:
 
=Properties=
 
=Properties=
 
==Title==
 
==Title==
[ Since 9.0.0 ]
+
{{versionSince| 9.0.0}}
Sets the title of this portalchildren. If title is not empty or null, frame design will be applied.
+
Sets the title of the portalchildren. If the title is not empty/null, frame design will be applied.
  
==CounterVisible==
+
===Frame Design===
[ Since 9.0.0 ]
+
PortalChildren now provides a frame design, making it extremely easy to create a Kanban-like layout for your application. To turn on the PortalChildren frame design, just specify the title attribute on the PortalChildren.  
Sets whether the counter is visible. Meaningful only if frame design is applied.
 
 
 
=Frame Design=
 
  
[ Since 9.0 ]
+
===Example===
 +
Each PortalChildren with title can be used as a Kanban board column to represent a process stage, and the panels inside each column represent tasks in the said stage. The number next to the PortalChildren title is a counter, indicating the total number of panels inside the said column.
  
PortalChildren now provides frame design, making it extremely easy to create a Kanban-like layout for your application. To turn on the PortalChildren frame design, just specified the title attribute to the PortalChildren.  
+
If a panel has a panel title, users can drag and hold the panel title to move it to the appropriate column. If the panel does not have a panel title, you can drag the small dragging button at the top of the panel to move.
  
==Example==
 
Each PortalChildren with title can be use as a kanban board column to represent each stage of the process, and the panels inside represent work items. Users can drag the panel via click and hold the panel title or the drag button for the panel without title. The number next to the title is a counter, It can prompt the user how many works are currently in this stage.
 
 
[[File:Kanban-1.png|800px|center]]
 
[[File:Kanban-1.png|800px|center]]
  
Line 108: Line 104:
 
</source>
 
</source>
  
 
+
==CounterVisible==
 
+
{{versionSince |9.0.0}}
 +
Sets whether the counter is visible. Meaningful only if frame design is applied.
  
 
=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>
Line 129: Line 126:
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 140: Line 137:
 
{{LastUpdated}}
 
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 01:22, 28 April 2023

Portalchildren

Employment/Purpose

The column of Portallayout

Child of Portalchildren can only be Panel

Example

ZKComRef Portallayout Example.PNG


<portallayout>
	<portalchildren width="50%">
		<panel height="150px" title="Yahoo">
			<panelchildren>
				<iframe width="100%" src="http://www.yahoo.com/"/>
			</panelchildren>
		</panel>
		<panel height="300px" title="Google">
			<panelchildren>
				<iframe width="100%" src="http://www.google.com/"/>
			</panelchildren>
		</panel>
	</portalchildren>
	<portalchildren width="50%">
		<panel height="150px" title="ZK">
			<panelchildren>
				<iframe width="100%" src="http://www.zkoss.org/"/>
			</panelchildren>
		</panel>
	</portalchildren>
</portallayout>

Properties

Title

Since 9.0.0 Sets the title of the portalchildren. If the title is not empty/null, frame design will be applied.

Frame Design

PortalChildren now provides a frame design, making it extremely easy to create a Kanban-like layout for your application. To turn on the PortalChildren frame design, just specify the title attribute on the PortalChildren.

Example

Each PortalChildren with title can be used as a Kanban board column to represent a process stage, and the panels inside each column represent tasks in the said stage. The number next to the PortalChildren title is a counter, indicating the total number of panels inside the said column.

If a panel has a panel title, users can drag and hold the panel title to move it to the appropriate column. If the panel does not have a panel title, you can drag the small dragging button at the top of the panel to move.

Kanban-1.png
<zk>
  <style>
    .z-panel {
      width: 300px;
    }
  </style>
   <portallayout>
     <portalchildren title="TO-DO">
       <panel title="Animation" border="normal">
         <panelchildren>......</panelchildren>
       </panel>
       <panel title="Illustration" border="normal">
         <panelchildren>......</panelchildren>
       </panel>
       <panel border="normal">
         <panelchildren>......</panelchildren>
       </panel>
       <panel title="Landing Page" border="normal">
         <panelchildren>......</panelchildren>
       </panel>
    </portalchildren>
     <portalchildren title="IN-PROGRESS">
       <panel title="Banner" border="normal">
         <panelchildren>......</panelchildren>
       </panel>
       <panel border="normal">
         <panelchildren>......</panelchildren>
       </panel>
     </portalchildren>
      <portalchildren title="DONE" >
       <panel title="Advertising" border="normal">
         <panelchildren>......</panelchildren>
       </panel>
       <panel border="normal">
         <panelchildren>......</panelchildren>
       </panel>
       <panel title="Interview" border="normal">
         <panelchildren>......</panelchildren>
       </panel>
     </portalchildren>
   </portallayout>
</zk>

CounterVisible

Since 9.0.0 Sets whether the counter is visible. Meaningful only if frame design is applied.

Supported Events

Name
Event Type
None None

Supported Children

* Panel

Use Cases

Version Description Example Location
     

Version History

Last Update : 2023/04/28


Version Date Content
9.0.0 Nov 2019 ZK-4398: Provide PortalChildren title and frame design



Last Update : 2023/04/28

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