Skip to content

Commit 1a9ceac

Browse files
kdinevkdinev
authored
Merge pull request #17057 from IgniteUI/mtsvyatkova/tile-manager-skill
fix(*): add tile manager to skills
2 parents f7f7ba3 + 13c8ed7 commit 1a9ceac

File tree

2 files changed

+131
-3
lines changed

2 files changed

+131
-3
lines changed

‎skills/igniteui-angular-components/SKILL.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
name: igniteui-angular-components
3-
description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
3+
description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, Tile Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
44
user-invocable: true
55
---
66

@@ -34,7 +34,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
3434
| List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Indicators, Chat | [`references/data-display.md`](./references/data-display.md) |
3535
| Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) |
3636
| Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) |
37-
| Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
37+
| Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component), Tile Manager (`igc-tile-manager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
3838
| Charts (Area, Bar, Column, Stock/Financial, Pie), chart configuration, chart features (animation, tooltips, markers, highlighting, zooming), data binding | [`references/charts.md`](./references/charts.md) |
3939

4040
> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.

‎skills/igniteui-angular-components/references/layout-manager.md‎

Lines changed: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Layout Manager & Dock Manager
1+
# Layout Manager, Dock Manager & Tile Manager
22

33
> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
44
> For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
@@ -7,6 +7,7 @@
77

88
- [Layout Manager Directives](#layout-manager-directives)
99
- [Dock Manager](#dock-manager)
10+
- [Tile Manager](#tile-manager)
1011

1112
---
1213

@@ -411,6 +412,133 @@ export class DockManagerComponent {
411412
5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users
412413
6. **Not part of `igniteui-angular`** — do not import from `igniteui-angular` entry points; all Dock Manager types come from `igniteui-dockmanager`
413414

415+
---
416+
417+
## Tile Manager
418+
419+
> **Docs:** [Tile Manager (Angular)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tile-manager)
420+
> **Full API Docs:** [Tile Manager Web Component](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager.html)
421+
422+
The Tile Manager is a **layout Web Component** that displays content in individual tiles users can **rearrange and resize**. It is implemented as an `igc-tile-manager` container with one or more `igc-tile` children.
423+
424+
### Installation
425+
426+
```bash
427+
npm install igniteui-webcomponents
428+
```
429+
430+
### Setup
431+
432+
Register the Tile Manager Web Component before bootstrap:
433+
434+
```typescript
435+
import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';
436+
437+
defineComponents(IgcTileManagerComponent);
438+
```
439+
440+
Add `CUSTOM_ELEMENTS_SCHEMA` to any component using `<igc-tile-manager>`:
441+
442+
```typescript
443+
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
444+
445+
@Component({
446+
selector: 'app-tile-manager',
447+
templateUrl: './tile-manager.component.html',
448+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
449+
})
450+
export class TileManagerComponent { }
451+
```
452+
453+
### Basic Usage
454+
455+
```html
456+
<igc-tile-manager>
457+
<igc-tile>
458+
<span slot="title">Tile 1 header</span>
459+
<p>Tile 1 content</p>
460+
</igc-tile>
461+
<igc-tile>
462+
<span slot="title">Tile 2 header</span>
463+
<p>Tile 2 content</p>
464+
</igc-tile>
465+
</igc-tile-manager>
466+
```
467+
468+
### Layout Properties
469+
470+
Key `igc-tile-manager` properties:
471+
472+
- **`column-count`**: number of grid columns; if omitted or \<1, as many columns as fit with a minimum width (200px) are created.
473+
- **`gap`**: space between tiles (e.g., `"20px"`, `"1rem"`).
474+
- **`min-column-width`**: minimum width per column (e.g., `"200px"`).
475+
- **`min-row-height`**: minimum height per row (e.g., `"150px"`).
476+
477+
```html
478+
<igc-tile-manager
479+
column-count="2"
480+
gap="20px"
481+
min-column-width="220px"
482+
min-row-height="160px">
483+
<igc-tile>
484+
<span slot="title">Tile 1 header</span>
485+
<p>Tile 1 content</p>
486+
</igc-tile>
487+
<igc-tile>
488+
<span slot="title">Tile 2 header</span>
489+
<p>Tile 2 content</p>
490+
</igc-tile>
491+
</igc-tile-manager>
492+
```
493+
494+
### Tile Properties
495+
496+
Each `igc-tile` can configure its own size and behavior:
497+
498+
- **`row-start` / `col-start`**: starting row/column for the tile
499+
- **`row-span` / `col-span`**: how many rows/columns the tile spans
500+
- **`disable-resize`**: prevents the tile from being resized
501+
- **`disable-maximize`** / **`disable-fullscreen`**: hide default header actions
502+
503+
```html
504+
<igc-tile-manager>
505+
<igc-tile col-span="2" disable-resize>
506+
<span slot="title">Wide tile</span>
507+
<p>Content</p>
508+
</igc-tile>
509+
<igc-tile row-span="2">
510+
<span slot="title">Tall tile</span>
511+
<p>Content that spans two rows.</p>
512+
</igc-tile>
513+
</igc-tile-manager>
514+
```
515+
516+
### Resizing & Dragging
517+
518+
- Resizing is controlled by the `resize-mode` property on `igc-tile-manager` (`"none"`, `"hover"`, `"always"`).
519+
- Reordering is enabled via the `drag-mode` property (`"tile"` or `"tile-header"`).
520+
521+
```html
522+
<igc-tile-manager resize-mode="hover" drag-mode="tile-header">
523+
<igc-tile>
524+
<span slot="title">Tile 1</span>
525+
<p>Content</p>
526+
</igc-tile>
527+
<igc-tile>
528+
<span slot="title">Tile 2</span>
529+
<p>Content</p>
530+
</igc-tile>
531+
</igc-tile-manager>
532+
```
533+
534+
### Key Rules for Tile Manager
535+
536+
1. **Web Component package** — Tile Manager ships via `igniteui-webcomponents`, not `igniteui-angular`.
537+
2. **Register components** — call `defineComponents(IgcTileManagerComponent)` once before using `<igc-tile-manager>`.
538+
3. **Use `CUSTOM_ELEMENTS_SCHEMA`** on Angular components that host the Tile Manager.
539+
4. **Use slots** — header content goes into `slot="title"`; additional actions and custom adorners use the documented slots (`fullscreen-action`, `maximize-action`, `actions`, `side-adorner`, `corner-adorner`, `bottom-adorner`).
540+
5. **Treat it as a layout container** — use Tile Manager when users need interactive, resizable and re-orderable tiles, not tabular data (use grids for that).
541+
414542
## See Also
415543

416544
- [`setup.md`](./setup.md) — App providers, architecture, all entry points

0 commit comments

Comments
 (0)