Molds"
RebeccaLai (talk | contribs) m |
|||
(8 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{ZKDevelopersReferencePageHeader}} | {{ZKDevelopersReferencePageHeader}} | ||
− | A component could have multiple different visual | + | A component could have multiple different visual appearances. Each appearance is called a '''mold'''. A mold is basically a combination of a DOM structure plus CSS. That is, it is the visual representation of a component. Developers could dynamically change the mold by use of <javadoc method="setMold(java.lang.String)" type="interface">org.zkoss.zk.ui.Component</javadoc>. |
− | All components support at least a mold called < | + | All components support at least a mold called <code>default</code>, which is the default value. Some components might have support for two or more molds. For example, tabbox supports both <code>default</code> and <code>accordion</code> molds. |
− | If < | + | If <code>tabbox</code>'s <code>mold</code> is not set, it uses the default mold. |
− | <source lang="xml" > | + | <source lang="xml" highlight='1'> |
<tabbox> | <tabbox> | ||
<tabs> | <tabs> | ||
Line 12: | Line 12: | ||
<tab label="Second tab" /> | <tab label="Second tab" /> | ||
</tabs> | </tabs> | ||
− | + | ... | |
− | |||
− | |||
− | |||
</tabbox> | </tabbox> | ||
</source> | </source> | ||
− | And you could set < | + | And you could set <code>tabbox</code>'s mold to "accordion" to change the look. |
− | <source lang="xml" > | + | <source lang="xml" highlight='1'> |
<tabbox mold="accordion"> | <tabbox mold="accordion"> | ||
<tabs> | <tabs> | ||
Line 26: | Line 23: | ||
<tab label="Second tab" /> | <tab label="Second tab" /> | ||
</tabs> | </tabs> | ||
− | + | ... | |
− | |||
− | |||
− | |||
</tabbox> | </tabbox> | ||
</source> | </source> | ||
− | + | = Supported Mold = | |
− | + | To know which mold a component supports, please refer to [[ZK Component Reference]]. | |
− | + | ||
− | + | =Custom Mold= | |
− | + | To largely change how a component renders in a browser, see [[ZK_Client-side_Reference/Customization/Custom_Mold]]. | |
− | |||
− | |||
− | |||
− | |||
− | |||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} |
Latest revision as of 08:46, 31 January 2024
A component could have multiple different visual appearances. Each appearance is called a mold. A mold is basically a combination of a DOM structure plus CSS. That is, it is the visual representation of a component. Developers could dynamically change the mold by use of Component.setMold(String).
All components support at least a mold called default
, which is the default value. Some components might have support for two or more molds. For example, tabbox supports both default
and accordion
molds.
If tabbox
's mold
is not set, it uses the default mold.
<tabbox>
<tabs>
<tab label="First tab" />
<tab label="Second tab" />
</tabs>
...
</tabbox>
And you could set tabbox
's mold to "accordion" to change the look.
<tabbox mold="accordion">
<tabs>
<tab label="First tab" />
<tab label="Second tab" />
</tabs>
...
</tabbox>
Supported Mold
To know which mold a component supports, please refer to ZK Component Reference.
Custom Mold
To largely change how a component renders in a browser, see ZK_Client-side_Reference/Customization/Custom_Mold.