The tile component is used within the igc-tile-manager as a container for displaying various types of information.

  • Default slot for the tile's content.

title - Renders the title of the tile header.

maximize-action - Renders the maximize action element of the tile header.

fullscreen-action - Renders the fullscreen action element of the tile header.

actions - Renders items after the default actions in the tile header.

side-adorner - Renders the side resize handle of the tile.

corner-adorner - Renders the corner resize handle of the tile.

bottom-adorner - Renders the bottom resize handle of the tile.

base - The wrapper for the entire tile content, header and content.

header - The container for the tile header, including title and actions.

title - The title container of the tile.

actions - The actions container of the tile header.

content-container - The container wrapping the tile’s main content.

trigger-side - The part for the side adorner of the encapsulated resize element in the tile.

trigger - The part for the corner adorner of the encapsulated resize element in the tile.

trigger-bottom - The part for the bottom adorner of the encapsulated resize element in the tile.

Callable

  • Returns ReactNode

Accessors

fullscreen: boolean

Indicates whether the tile occupies the whole screen.

Events

onTileDragCancel: (args: CustomEvent<IgrTile>) => void

Fired when a tile drag operation is canceled by the user.

Type declaration

onTileDragEnd: (args: CustomEvent<IgrTile>) => void

Fired when a drag operation with a tile is successfully completed.

Type declaration

onTileDragStart: (args: CustomEvent<IgrTile>) => void

Fired when a drag operation on a tile is about to begin. Cancelable.

Type declaration

onTileFullscreen: (args: CustomEvent<IgrTileChangeStateEventArgsDetail>) => void

Fired when tile the fullscreen state changes.

Type declaration

onTileMaximize: (args: CustomEvent<IgrTileChangeStateEventArgsDetail>) => void

Fired when tile the maximize state changes.

Type declaration

onTileResizeCancel: (args: CustomEvent<IgrTile>) => void

Fired when a resize operation on a tile is canceled by the user.

Type declaration

onTileResizeEnd: (args: CustomEvent<IgrTile>) => void

Fired when a resize operation on a tile is successfully completed.

Type declaration

onTileResizeStart: (args: CustomEvent<IgrTile>) => void

Fired when a resize operation on a tile is about to begin. Cancelable.

Type declaration

Properties

colSpan: number

The number of columns the tile will span.

colStart: number

The starting column for the tile.

disableFullscreen: boolean

Whether to disable the rendering of the tile fullscreen-action slot and its default fullscreen action button.

disableMaximize: boolean

Whether to disable the rendering of the tile maximize-action slot and its default maximize action button.

disableResize: boolean

Indicates whether to disable tile resize behavior regardless ot its tile manager parent settings.

maximized: boolean

Indicates whether the tile occupies all available space within the layout.

position: number

Gets/sets the tile's visual position in the layout. Corresponds to the CSS order property.

rowSpan: number

The number of rows the tile will span.

rowStart: number

The starting row for the tile.