Component Specifics

Some of the available components expose specific features in terms of their content layout, export, and general behavior.

Grid

The Grid is a complex component that can be constructed in various ways according to the design requirements. You can use the Grid as а built-in solution from the component library or create a custom symbol.

Composing the Grid Symbol

The master Grid symbol is composed with the Sketch smart layout that allows flexible customizations in the layout.

Depending on the layout orientation, use the desired type of Grid:

• Grid of the row type or vertical orientation—Allows you to show or hide rows from the instance override settings.

• Grid of the column type or horizontal orientation—Allows you to show or hide columns from the instance override settings.

Depending on the application design specifics, use the desired predefined Grid feature settings.

• A Grid with a header.

• A Grid with filtering.

• A Grid in the inline edit mode.

• Grid with sorting.

• Grid with grouping.

• Grid with grouping, sorting and filtering.

All Grid instances can be populated with your own data from the instance override panel.

Customizing the Grid

Depending on the use case scenario, you may require Grid settings that are not offered in the built-in Kendo UI library. In such cases, you can create your own Grid and associate it with a custom symbol. In the Kendo UI component library, all Grid structural parts are available as master symbols and you can compose a new Grid symbol.

While designing a Kendo UI Grid, consider the capabilities of the component itself. All deviation of the configuration will need a custom CSS in the implementation.

TabStrip

• The TabStrip is a placeholder component. After its symbols are dropped in the design canvas, draw its content.
• To allow the content of the TabStrip to follow the responsive rules and be properly exported, group all its content layers in Horizontal and Vertical containers.

• In order for the Unite UX Sketch plugin to recognize that some of the layers are content elements, place the content of each tab in a group which is positioned on the same level as the TabStrip symbol instance.

  

Expander

• The Expander is a placeholder component. After its symbols are dropped in the design canvas, draw its content.
• To allow the content of the TabStrip to follow the responsive rules and be properly exported, group all its content layers in Horizontal and Vertical containers.

• In order for the Unite UX Sketch plugin to recognize that some of the layers are content elements, place the content of the Expander in a group which is positioned on the same level as the Expander symbol instance.

  

Suggested Links

• Using Master Symbols for Custom Components in Unite UX Sketch
• Using Custom Components in Unite UX Studio