What’s New: Web Components Tile Manager

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. In this blog post, we will explain how it works and look at features like resizing, reordering, serialization, and more.

Web Components Tile Manager Component

The Web Components Tile Manager 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. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content.

Properties of the Tile Manager

Columns and Rows

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

Gap

The Gap property defines the space between tiles. The value of the gap 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.

Minimum Width and Height

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

Resizing

Resizing in the Tile Manager is a functionality that allows tiles to be resized using three different resize adorners.

• Side Adorner: Adjusts the width by modifying the column span.
• Bottom Adorner: Adjusts the height by modifying the row span.
• Corner Adorner: Adjusts both width and height simultaneously.

Reorder

You can reorder tiles in the Tile Manager using the drag-and-drop feature. By default, tiles are not draggable. To enable this functionality, set the drag-mode property on the Tile Manager to either tile or tile-header.

• With the tile option, you can click and hold anywhere on an individual tile to start dragging it.
• With the tile-header option, you can only click and hold in the tile’s header section to start the dragging process.

Serialization

The Web Components Tile Manager provides methods that help manage the layout of tiles:

• The saveLayout method allows you to save the current arrangement of tiles in the Tile Manager. It captures the current order, size, and position of all tiles so you can restore them to this exact configuration later.
• The loadLayout method enables you to load a previously saved layout. When called, it restores the tiles to the exact state they were in when the layout was saved, including their order, size, and position.

Styling

You can also customize the appearance of the two components – Tile Manager and Tile. The Tile Manager exposes only one CSS property – base which can be used for styling the base wrapper of the Tile Manager. The Tile component exposes several CSS properties that you can use.

Properties of the Tile component

The Web Components Tile component has properties that can be set individually for each tile. Some of these properties include:

• The col-span property specifies how many columns the tile will span across in the layout, allowing you to control its horizontal size.
• The row-span property determines how many rows the tile will span vertically, adjusting the tile’s height within the layout.
• The col-start property specifies the starting column where the tile is placed.
• The row-start property specifies the starting row where the tile is placed.
• The disable-fullscreen property hides the default fullscreen action button.
• The disable-maximize property hides the default maximize toggle action button.
• The disable-resize property prevents the tile from being resized by the user.

Ignite UI for Web Components 5.3.0 Changelog

Explore all the details here.

Added

• Tile manager component #1402
• List
  • The igc-list-item component exposes a new selected property. When set on a list item, the item will become visually highlighted #1590

Changed

• Progressbar
  • Use theme schemas #1582

Fixed

• Calendar
  • Days row height for Fluent and Bootstrap themes #1597
  • Disabled date text color in range preview for Material and Indigo themes #1595
• Chip
  • Improved responsive layout styles #1588
• Combo
  • Improved toggle button visual states #1580

---

To Wrap It All Up…

 Seamlessly crafted for compatibility, Ignite UI for Angular is the library that enables you to leverage the power of the latest technologies and major releases. Committed to providing you with the best Angular UI toolkit and related insights, our goal is to equip you with more know-how, new features, enhanced performance, and improved stability. Some of the enhancements were added thanks to the requests from users like yourself through our Ignite UI for Web Components GitHub repository. With this in mind, we are always open to suggestions and feedback – it makes us grow and better respond to your development needs.

If you need more details, we encourage you to check out our:

• Discord channel
• GitHub discussions
• Roadmap
• YouTube channel
• Twitter

In Addition

Follow Ignite UI on Medium to stay up-to-date and learn about the latest Angular-related projects we are working on. Give us a star on GitHub , and help us continue improving our product by addressing any concerns, questions, or feature requests in the issues section.