Berikut adalah contoh componen pada zkoss
1. Tabboxes
<hbox hflex="1">
<tabbox width="250px">
<tabs>
<tab label="Tab 1" closable="true"/>
<tab label="Tab 2" closable="true"/>
<tab label="Tab 3" closable="true"/>
<tab label="Tab 4" closable="true"/>
<tab label="Tab 5" closable="true"/>
</tabs>
<toolbar width="92px">
<toolbarbutton image="/img/live.gif" onClick='alert("Live")' />
<toolbarbutton image="/img/defender.gif"
onClick='alert("Defender")' />
<toolbarbutton image="/img/battery.gif"
onClick='alert("Battery")' />
</toolbar>
<tabpanels>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 2
The second panel</tabpanel>
<tabpanel>This is panel 3</tabpanel>
<tabpanel>This is panel 4</tabpanel>
<tabpanel>This is panel 5</tabpanel>
</tabpanels>
</tabbox>
<vbox hflex="1">
<tabbox id="tb" hflex="1" mold="accordion">
<tabs>
<tab label="Tab 1"/>
<tab label="Tab 2"/>
</tabs>
<tabpanels>
<tabpanel>
<tabbox id="tb2" orient="vertical">
<tabs width="24px">
<tab label="A"/>
<tab label="B"/>
<tab label="C"/>
<tab label="D"/>
<tab label="E"/>
</tabs>
<tabpanels>
<tabpanel>This is panel A</tabpanel>
<tabpanel>This is panel B</tabpanel>
<tabpanel>This is panel C</tabpanel>
<tabpanel>This is panel D</tabpanel>
<tabpanel>This is panel E</tabpanel>
</tabpanels>
</tabbox>
<checkbox label="Horizonal orient" onCheck='tb2.orient=self.checked?"horizontal":"vertical"'/>
</tabpanel>
<tabpanel>
This is panel 2
The second panel
</tabpanel>
</tabpanels>
</tabbox>
</vbox>
</hbox>
2. Splitters
<window>
<panel title="Splitter" border="normal" width="450px">
<panelchildren>
<hbox spacing="0" width="100%" height="100%">
<vbox spacing="0" width="100%" heights="100px,100px">
Column 1-1: The left-top box. To know whether a splitter
is collapsed, you can listen to the onOpen event.
<splitter id="s1" collapse="before"/>
Column 1-2: You can enforce to open or collapse programming
by calling setOpen method.
</vbox>
<splitter id="s2" collapse="before"/>
Column 2: Whether a splitter allows users to open or collapse
depending on the collapse attribue.
</hbox>
</panelchildren>
</panel>
</window>
