Sclass"

From Documentation
m
m (correct highlight (via JWB))
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
The purpose of the Sclass is to lightly change the CSS of the component.
+
{{ZKStyleGuidePageHeader}}
 +
 
 +
As described in [[ZK Style Guide/ZK Class Concept|the previous section]], Styling Class (aka., sclass) is a way to add CSS styling to a particular component. By default, nothing is assigned to sclass (i.e., empty). Once it is assigned with a non-empty value (<javadoc method="setSclass(java.lang.String)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc>), it will be added to the root element as additional CSS class.
  
 
For example,
 
For example,
Line 13: Line 15:
 
</zk>
 
</zk>
 
</source>
 
</source>
As you can see, the above example has two Textbox, one has the Sclass property, and the other has no the Sclass property. Most of the time we need to customize a style with a special field without influencing others, we can specify the Sclass property instead.
+
 
 +
As shown above, the first textbox is assigned with a sclass called <code>mydb</code>, while the second textbox is not. If you examine the above example with a DOM inspector (such as [http://getfirebug.com/ Firebug]), you will find ZK assigns two CSS classes to the first textbox: <code>z-textbox</code> and <code>mydb</code>. That is, the textbox will inherit all CSS styles from the default rules (for <code>z-textbox</code>), while the custom CSS class (<code>mydb</code> in this example) is used to provide additional customization.
 +
 
 +
{{ZKStyleGuidePageFooter}}

Latest revision as of 13:25, 19 January 2022


As described in the previous section, Styling Class (aka., sclass) is a way to add CSS styling to a particular component. By default, nothing is assigned to sclass (i.e., empty). Once it is assigned with a non-empty value (HtmlBasedComponent.setSclass(String)), it will be added to the root element as additional CSS class.

For example,

<zk>
<style dynamic="true">
.mydb {
border: 1px solid blue;
}
</style>
<textbox sclass="mydb" value="having Sclass"/>
<textbox value="Without Sclass"/>
</zk>

As shown above, the first textbox is assigned with a sclass called mydb, while the second textbox is not. If you examine the above example with a DOM inspector (such as Firebug), you will find ZK assigns two CSS classes to the first textbox: z-textbox and mydb. That is, the textbox will inherit all CSS styles from the default rules (for z-textbox), while the custom CSS class (mydb in this example) is used to provide additional customization.



Last Update : 2022/01/19

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