@progress/kendo-vue-layout/tilelayout/TileLayout.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
 *-------------------------------------------------------------------------------------------
 */
import { TileLayoutGap, TileLayoutItem, TilePosition, TileLayoutRepositionEvent, TileLayoutAutoFlow } from './interfaces/main';
/**
 * Represents the properties of [TileLayout](% slug overview_tilelayout %) component.
 */
export interface TileLayoutProps {
    /**
     * Sets the `id` property of the root element.
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Specifies the gaps between the tiles ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     *
     * * The possible keys are:
     * * `rows`
     * * `columns`
     */
    gap?: TileLayoutGap;
    /**
     * Specifies the default number of columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    columns?: number;
    /**
     * Specifies the default width of the columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    columnWidth?: number | string;
    /**
     * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    rowHeight?: number | string;
    /**
     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
     */
    dataItemKey?: string;
    /**
     * The collection of items that will be rendered in the TileLayout
     * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    items?: TileLayoutItem[];
    /**
     * The list of tiles' positions which are used when the TileLayout is in controlled mode
     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
     */
    positions?: TilePosition[];
    /**
     * Fires when the user repositions the tile by either dragging or resizing
     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
     */
    onReposition?: (event: TileLayoutRepositionEvent) => void;
    /**
     * 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`
     * ([see example]({% slug autoflows_tilelayout %})).
     */
    autoFlow?: TileLayoutAutoFlow | String;
    /**
     * Use this callback to prevent or allow dragging of the tiles based on specific dom event.
     * Setting `:ignoreDrag="$event => !$event.target.closest('.k-card-title')"` will make only the headers draggable.
     * Setting `:ignoreDrag="$event => $event.target.nodeName == 'INPUT'"` will ignore dragging input elements.
     */
    ignoreDrag?: (event: any) => boolean;
}
/**
 * @hidden
 */
declare const TileLayout: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    id: StringConstructor;
    dir: StringConstructor;
    gap: ObjectConstructor;
    columns: NumberConstructor;
    columnWidth: (StringConstructor | NumberConstructor)[];
    rowHeight: (StringConstructor | NumberConstructor)[];
    dataItemKey: StringConstructor;
    items: ArrayConstructor;
    positions: ArrayConstructor;
    autoFlow: {
        type: StringConstructor;
        default: string;
        validator: (value: string) => any;
    };
    ignoreDrag: FunctionConstructor;
}>, {}, {
    currentPositions: any[];
    showLicenseWatermark: boolean;
    licenseMessage: any;
}, {
    compPositions(): any;
    wrapperClass(): {
        [x: number]: boolean;
        'k-tilelayout': boolean;
        'k-pos-relative': boolean;
    };
}, {
    focus(): void;
    updateHandle(index: number, dOrder: number, dCol: number, dRowSpan: number, dColSpan: number, isResized: boolean): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    id: StringConstructor;
    dir: StringConstructor;
    gap: ObjectConstructor;
    columns: NumberConstructor;
    columnWidth: (StringConstructor | NumberConstructor)[];
    rowHeight: (StringConstructor | NumberConstructor)[];
    dataItemKey: StringConstructor;
    items: ArrayConstructor;
    positions: ArrayConstructor;
    autoFlow: {
        type: StringConstructor;
        default: string;
        validator: (value: string) => any;
    };
    ignoreDrag: FunctionConstructor;
}>> & Readonly<{}>, {
    autoFlow: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export { TileLayout };