ZK Class Concept"
m |
|||
| Line 9: | Line 9: | ||
# Change sclass (<javadoc method="setSclass(java.lang.String)" type="interface">org.zkoss.zk.ui.Component</javadoc>) | # 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>) | # Change zclass (<javadoc method="setZclass(java.lang.String)" type="interface">org.zkoss.zk.ui.Component</javadoc>) | ||
| − | # Overwrite CSS | + | # Overwrite CSS rules (for the predefined CSS 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, | + | 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, while the zclass, the green box below, will be used as a prefix for the naming the CSS class of the child DOM elements. |
| + | |||
| + | For example, the following statement will assign the CSS class of the root DOM element with <tt>zk-button foo-pretty</tt>: | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <button sclass="foo-pretty"/> | ||
| + | </source> | ||
{{ZKStyleGuideHeadingToc | {{ZKStyleGuideHeadingToc | ||
Revision as of 05:16, 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 rules (for the predefined CSS 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, while the zclass, the green box below, will be used as a prefix for the naming the CSS class of the child DOM elements.
For example, the following statement will assign the CSS class of the root DOM element with zk-button foo-pretty:
<button sclass="foo-pretty"/>