Lesson 6: Applying Style Class to Column Header, Column Cell and Container for alignment

499 views

Welcome to Lesson 6 of our SmartUX Demo Application series. This guide will walk you through applying style Class properties to Column Header Cell, Column Cell and its Container. These Classes’ property allows user to have an alignment and look and feel as per their requirement. Follow the detailed and engaging instructions provided to seamlessly configure the necessary components within the application.

1. First Column Header Cell Class property

Click on the First Column Header “#”.
In the Properties Sheet of Column Header Cell input the Class property with “table-col-xs” and “text-center”.

First Column Header Cell Class property

2. First Column Container Class Property

Click on the Container under the First column.
In the Properties Sheet of Container input the Class property as “text-center”.

First Column Container Class Property

3. Switch to Outline tree to Select Column Cell

Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
The Outline tree contains all the Widgets tree, also in which order they are placed inside one another on the Canvas.
In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.1”.
This will open the Properties Sheet for the Column Cell.

Switch to Outline tree to Select Column Cell

4. First column cell Class property

In the Properties Sheet of Column Cell, input the Class property as “table-col-xs”.

First column cell Class property

5. Title Column Header Cell Class Property

Click on the Second Column Header Cell “Title”.
In the Properties Sheet of Column Cell Header, input the Class property as “table-col-xs”.

Title Column Header Cell Class Property

6. Column Cell 2 from Outline Tree

Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.2”.
This will open the Properties Sheet for the Column Cell.

Column Cell 2 from Outline Tree

7. Second column cell Class property

In the Properties Sheet of Column Cell, input the Class property as “table-col-xs”.

Second column cell Class property

8. Birth Date Column Header Cell Class Property

Now, Click on the Fifth Column Header Cell “Birth Date”.
In the Properties Sheet of Column Cell Header, input the Class property as “table-col-sm”.

Birth Date Column Header Cell Class Property

9. Column Cell 5 from the Outline Tree

Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.5”.
This will open the Properties Sheet for the Column Cell.

Column Cell 5 from the Outline Tree

10. Fifth Column Cell Class Property

In the Properties Sheet of Column Cell, input the Class property as “table-col-sm”.

Fifth Column Cell Class Property

11. Gender Column Header Cell Class Property

Now, Click on the Sixth Column Header Cell “Gender”.
In the Properties Sheet of Column Cell Header, input the Class property as “table-col-sm”.

Gender Column Header Cell Class Property

12. Column Cell 6 from Outline Tree

Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.6”.
This will open the Properties Sheet for the Column Cell.

Column Cell 6 from Outline Tree

13. Sixth Column Cell Class Property

In the Properties Sheet of Column Cell, input the Class property as “table-col-sm”.

Sixth Column Cell Class Property

14. Action Column Header Cell Class Property

Now, Click on the Seventh Column Header Cell “Action”.
In the Properties Sheet of Column Cell Header, input the Class property as “ActionCol” and “text-center”.

Action Column Header Cell Class Property

15. Column Cell 7 from the Outline Tree

Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.7”.
This will open the Properties Sheet for the Column Cell.

Column Cell 7 from the Outline Tree

16. Seventh Column Cell Class Property

In the Properties Sheet of Column Cell, input the Class property as “ActionCol”.

Seventh Column Cell Class Property

This guide covered the process of applying styles, configuring classes, and saving changes systematically. By following the engaging instructions provided, you can efficiently set up the necessary components for training.