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.

Row Type Grid

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

Column Type Grid

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

  • A Grid with a header.

Grid Header

  • A Grid with filtering.

Grid Filtering

  • A Grid in the inline edit mode.

Grid Inline Editing

  • Grid with sorting.

Grid Sorting

  • Grid with grouping.

Grid Grouping

  • Grid with grouping, sorting and filtering.

Grid Grouping, Sorting and Filtering

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

Grid Add Data

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.

Grid Structureal Components

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.

    Tab Strip

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.

    Expander

In this article
Not finding the help you need?