Partial customize with Sclass and Zclass"
Jumperchen (talk | contribs) |
m (correct highlight (via JWB)) |
||
| Line 9: | Line 9: | ||
Using sclass is very easy, simply add another CSS class name within the component in line 8: | Using sclass is very easy, simply add another CSS class name within the component in line 8: | ||
| − | <source lang="xml" | + | <source lang="xml" highlight="8"> |
<zk> | <zk> | ||
<style> | <style> | ||
| Line 30: | Line 30: | ||
For example, if you only apply border-radius and gradient background style like the following | For example, if you only apply border-radius and gradient background style like the following | ||
| − | <source lang="xml" | + | <source lang="xml" highlight="8"> |
<zk> | <zk> | ||
<style> | <style> | ||
| Line 53: | Line 53: | ||
Some components have complex DOM structures, therefore sometimes you cannot override the style by just using sclass as described above. For example, if we try to style menu text color to blue and we use sclass to do the job: | Some components have complex DOM structures, therefore sometimes you cannot override the style by just using sclass as described above. For example, if we try to style menu text color to blue and we use sclass to do the job: | ||
| − | <source lang="xml" | + | <source lang="xml" highlight="3, 8"> |
<zk> | <zk> | ||
<style> | <style> | ||
| Line 77: | Line 77: | ||
However, we can use CSS class rule with "'''''sclass zclass'''''" pattern to achieve this goal. Modify the style like the following: | However, we can use CSS class rule with "'''''sclass zclass'''''" pattern to achieve this goal. Modify the style like the following: | ||
| − | <source lang="xml" | + | <source lang="xml" highlight="3"> |
<zk> | <zk> | ||
<style> | <style> | ||
Latest revision as of 13:24, 19 January 2022
Partial customization is a convenient way to fast prototype the look and feel and to change the style of a specific component. Here we will demonstrate how to you can execute partial customization by using Sclass and Zclass.
Using Sclass
Using sclass is very easy, simply add another CSS class name within the component in line 8:
<zk>
<style>
.mybutton {
border-radius: 10px;
background: linear-gradient(to bottom, #f0f9ff 0%,#a1dbff 100%);
}
</style>
<button label="Test Sclass" sclass="mybutton" />
<button label="Default" />
</zk>
We can see that only the first button has been applied .mybutton style.
Using Zclass
Normally, zclass is used to customize a totally different look and feel to that of the default one. For example, if you only apply border-radius and gradient background style like the following
<zk>
<style>
.mybutton {
border-radius: 10px;
background: linear-gradient(to bottom, #f0f9ff 0%,#a1dbff 100%);
}
</style>
<button label="Test Zclass" zclass="mybutton" />
<button label="Default" />
</zk>
you can see that the button looses its default style such as font size and border style as illustrated below:
Note: Applying zclass will lose all default styles, make sure you really want to customize the entire look and feel of the component before you do this.
Advanced Usage
Some components have complex DOM structures, therefore sometimes you cannot override the style by just using sclass as described above. For example, if we try to style menu text color to blue and we use sclass to do the job:
<zk>
<style>
.mymenu {
color: blue;
}
</style>
<menubar id="menubar" hflex="min">
<menu label="Custom Style" sclass="mymenu">
<!-- omitted -->
</menu>
<menu label="Default Style">
<!-- omitted -->
</menu>
</menubar>
</zk>
you can see that the style is not applied.
However, we can use CSS class rule with "sclass zclass" pattern to achieve this goal. Modify the style like the following:
<zk>
<style>
.mymenu .z-menu-text {
color: blue;
}
</style>
<menubar id="menubar" hflex="min">
<menu label="Custom Style" sclass="mymenu">
<!-- omitted -->
</menu>
<menu label="Default Style">
<!-- omitted -->
</menu>
</menubar>
</zk>
the style is now correctly applied.
Version History
| Version | Date | Content |
|---|---|---|