@progress/kendo-vue-layout/tilelayout/interfaces/main.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
/**
 * The interface for describing items that can be passed to the `items` property of the TileLayout component.
 */
export interface TileLayoutItem {
    /**
     * The position which is used when the TileLayout is in uncontrolled mode
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    defaultPosition?: TilePosition;
    /**
     * Sets additional styles to the TileLayoutItem.
     */
    style?: object;
    /**
     * Sets additional classes to the TileLayoutItem.
     */
    class?: string;
    /**
     * The tile object.
     */
    tile?: object;
    /**
     * Sets additional CSS styles to the TileLayoutItem hint element.
     */
    hintStyle?: object;
    /**
     * Sets additional classes to the TileLayoutItem hint element.
     */
    hintClass?: string;
    /**
     * Sets the title in the TileLayoutItem's header content
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    header?: any;
    /**
     * Sets the title in the TileLayoutItem's header text
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    headerText?: string;
    /**
     * Sets the content in TileLayoutItem's body content
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    body?: any;
    /**
     * Sets the content in TileLayoutItem's body text
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    bodyText?: string;
    /**
     * Overrides the default rendering of the TileLayoutItem
     * ([see example]({% slug tiles_custom_rendering_tilelayout %})).
     */
    item?: any;
    /**
     * Specifies the id of each Tile if needed to be user-defined. By default the id is automatically generated.
     */
    id?: any;
    /**
     * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
     * ([see example]({% slug tiles_resizing_tilelayout %})).
     * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
     */
    resizable?: TileResizeMode | string | boolean;
    /**
     * Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it
     * ([see example]({% slug tiles_reordering_tilelayout %})).
     * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
     */
    reorderable?: boolean;
    /**
     * Specifies if the tabIndex of each TileLayout tile if the scenario requires it. Defaults to `0`.
     */
    tabIndex?: number;
}
/**
 * Specifies the position of each tile.
 */
export interface TilePosition {
    /**
     * Defines the order index of the TileLayoutItem.
     * If not set, items will receive a sequential order.
     */
    order?: number;
    /**
     * (Required) Defines on which column-line the TileLayoutItem will start.
     * It is required in order reordering and resizing functionalities to work as expected as they rely on it.
     */
    col: number;
    /**
     * Specifies how many columns will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    colSpan?: number;
    /**
     * Defines on which row-line the TileLayoutItem will start.
     */
    row?: number;
    /**
     * Specifies how many rows will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    rowSpan?: number;
}
/**
 * Specifies the strict position of each tile.
 * Used in the [TileLayoutRepositionEvent]({% slug api_layout_tilelayoutrepositionevent %}).
 */
export interface TileStrictPosition extends TilePosition {
    /**
     * Defines the order index of the TileLayoutItem.
     * If not set, items will receive a sequential order.
     */
    order: number;
    /**
     * Specifies how many rows will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    rowSpan: number;
    /**
     * Specifies how many columns will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    colSpan: number;
}
/**
 * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
 * ([see example]({% slug tiles_resizing_tilelayout %})).
 * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
 */
export type TileResizeMode = 'horizontal' | 'vertical' | boolean;
/**
 * Specifies the gaps between the tiles.
 */
export interface TileLayoutGap {
    /**
     * The rows gap between tiles.
     * Defaults to `16px`.
     */
    rows?: number | string;
    /**
     * The columns gap between tiles.
     * Defaults to `16px`.
     */
    columns?: number | string;
}
/**
 * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
 * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
 * Defaults to `column`.
 */
export type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset';
/**
 * The arguments for the `onReposition` TileLayout event.
 */
export interface TileLayoutRepositionEvent {
    /**
     * The new positions of the TileLayout tiles.
     */
    value: Array<TileStrictPosition>;
    /**
     * The index of the currently moved tile.
     */
    index: number;
    /**
     * Returns 0 if the row is not changed, 1 if the item is dragged to the next row
     * and -1 if the item is drag to the previous row.
     */
    row: number;
    /**
     * Returns 0 if the column is not changed, 1 if the item is dragged to the next column
     * and -1 if the item is drag to the previous column.
     */
    col: number;
}
/**
 * The arguments for the `onTileresize` TileLayout event.
 */
export interface TileLayoutTileResizeEvent {
    /**
     * The new resized positions of the TileLayout tiles.
     */
    value: Array<TileStrictPosition>;
    /**
     * The index of the currently resized tile.
     */
    index: number;
    /**
     * Returns 0 if the rowSpan is not changed, 1 if the rowSpan is increased
     * and -1 if the rowSpan is decreased.
     */
    rowSpan: number;
    /**
     * Returns 0 if the columnSpan is not changed, 1 if the columnSpan is increased
     * and -1 if the columnSpan is decreased.
     */
    colSpan: number;
}