ZK Class Concept"
Tmillsclare (talk | contribs) m |
m |
||
| Line 1: | Line 1: | ||
{{ZKStyleGuidePageHeader}} | {{ZKStyleGuidePageHeader}} | ||
| − | ZK Class | + | ZK Class (aka., zclass) is a naming pattern. It appends a particular pattern for particular user's activity, such as click, focus, mouse-over, mouse-out, and so on. For example, when a user moves the mouse over a button, additional CSS class will be added automatically to the button. Since ZK Style Class of abutton is <tt>z-button</tt>, the CSS class will be <tt>z-button z-button-over</tt> when the mouse is over it. Similarly, if the button gains the focus, the CSS class will become <tt>z-button z-button-focus</tt>. Thus, we could customize a specific component for a particular scenario easily. |
| + | ZK Class is also used to distinguish different molds of components, and even to provide totally different look for the same component in the same mold. | ||
| − | + | There are three different ways to change the style of ZK components: | |
| + | # Change sclass (<javadoc method="setSclass(java.lang.String)" type="interface">org.zkoss.zk.ui.Component</javadoc>) | ||
| + | # Change zclass (<javadoc method="setZclass(java.lang.String)" type="interface">org.zkoss.zk.ui.Component</javadoc>) | ||
| + | # Overwrite CSS rule (of the predefined name) | ||
| − | + | The relationship of sclass and zclass is shown below. The sclass, the red box below, will be added to the CSS class of the root DOM element of the component, and the zclass, the green box below, will be used as a prefix for the naming the CSS class of the child DOM elements. | |
{{ZKStyleGuideHeadingToc | {{ZKStyleGuideHeadingToc | ||
Revision as of 05:11, 8 April 2011
ZK Class (aka., zclass) is a naming pattern. It appends a particular pattern for particular user's activity, such as click, focus, mouse-over, mouse-out, and so on. For example, when a user moves the mouse over a button, additional CSS class will be added automatically to the button. Since ZK Style Class of abutton is z-button, the CSS class will be z-button z-button-over when the mouse is over it. Similarly, if the button gains the focus, the CSS class will become z-button z-button-focus. Thus, we could customize a specific component for a particular scenario easily.
ZK Class is also used to distinguish different molds of components, and even to provide totally different look for the same component in the same mold.
There are three different ways to change the style of ZK components:
- Change sclass (Component.setSclass(String))
- Change zclass (Component.setZclass(String))
- Overwrite CSS rule (of the predefined name)
The relationship of sclass and zclass is shown below. The sclass, the red box below, will be added to the CSS class of the root DOM element of the component, and the zclass, the green box below, will be used as a prefix for the naming the CSS class of the child DOM elements.