{"id":2640,"date":"2025-03-20T09:27:48","date_gmt":"2025-03-20T09:27:48","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=2640"},"modified":"2025-03-21T08:16:05","modified_gmt":"2025-03-21T08:16:05","slug":"web-components-tile-manager","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/web-components-tile-manager","title":{"rendered":"What’s New: Web Components Tile Manager"},"content":{"rendered":"\n

This Ignite UI for Web Components 5.3 release introduces a brand-new, time-saving component with features that ensure agility and optimal user experience: Tile Manager<\/a>. In this blog post, we will explain how it works and look at features like resizing, reordering, serialization, and more.<\/p>\n\n\n\n

Web Components Tile Manager Component<\/h2>\n\n\n\n

The Web Components Tile Manager<\/a> component provides UI to display content in individual tiles. It allows users to interact with the tiles by rearranging and resizing them. The freedom to customize the layout and appearance of the content according to their preferences could be matched only by the Dock Manager component<\/a>. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Properties of the Tile Manager<\/h3>\n\n\n\n

Columns and Rows<\/a><\/h4>\n\n\n\n

As a user, you can define the number of grid columns for Web Components Tile Manager. To do this, simply set the column-count<\/code> property to the desired number of columns.<\/p>\n\n\n\n

Gap<\/a><\/h4>\n\n\n\n

The Gap property defines the space between tiles. The value of the gap<\/code> property must be a number followed by a length unit (e.g., px, rem, em, …). This value will apply to both the horizontal gap (width) and the vertical gap (height) between tiles.<\/p>\n\n\n\n

Minimum Width and Height<\/a><\/h4>\n\n\n\n

Are properties for setting the minimum width of the columns (min-column-width<\/code>) and the minimum height of the rows (min-row-height<\/code>) in the Tile Manager. Similar to the gap property, the values for these properties must be a number followed by a length unit.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Resizing<\/a><\/h3>\n\n\n\n

Resizing in the Tile Manager is a functionality that allows tiles to be resized using three different resize adorners.<\/p>\n\n\n\n