ZK Style Customization Guide/Look and Feel Customization/Partial customize with Sclass and Zclass

Partial customization is a convenient way to fast prototype the look and feel and to change the style of specific component only. Here we will demonstrate how to do partial customization by using Sclass and Zclass.

Using Sclass

Using sclass is very easy, just 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>

and then we can see only first button apply .mybutton style.

Using Zclass

Using zclass normally means to customize different look and feel than default. For example, if you only apply border-radius and gradient background style as follows:

<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>

will lose default style such as font size and border style like the image showed below:

Note: Apply zclass will lose all default style, make sure you really want to customize whole look and feel of the component.

Advanced Usage

Some components have complex DOM structure, therefore sometimes you cannot override the style by using sclass as described above. For example, if we try to style menu text color to blue and use sclass as follows:

<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>

and we can see the style is not applied.

However, we can use CSS class rule with "sclass zclass" pattern to achieve our goal. Modify the style as follows:

<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>

and you can see the style is correctly applied.

Version History

Version	Date	Content