devextreme/ui/tile_view.d.ts

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (ui/tile_view.d.ts)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import DataSource, {
    DataSourceOptions
} from '../data/data_source';

import CollectionWidget, {
    CollectionWidgetItem,
    CollectionWidgetOptions
} from './collection/ui.collection_widget.base';

/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface dxTileViewOptions extends CollectionWidgetOptions<dxTileView> {
    /** A Boolean value specifying whether or not the widget changes its state when interacting with a user. */
    activeStateEnabled?: boolean;
    /** Specifies the height of the base tile view item. */
    baseItemHeight?: number;
    /** Specifies the width of the base tile view item. */
    baseItemWidth?: number;
    /** Binds the widget to data. */
    dataSource?: string | Array<string | dxTileViewItem | any> | DataSource | DataSourceOptions;
    /** Specifies whether tiles are placed horizontally or vertically. */
    direction?: 'horizontal' | 'vertical';
    /** Specifies whether the widget can be focused using keyboard navigation. */
    focusStateEnabled?: boolean;
    /** Specifies the widget's height. */
    height?: number | string | (() => number | string);
    /** Specifies whether the widget changes its state when a user pauses on it. */
    hoverStateEnabled?: boolean;
    /** Specifies the distance in pixels between adjacent tiles. */
    itemMargin?: number;
    /** An array of items displayed by the widget. */
    items?: Array<string | dxTileViewItem | any>;
    /** A Boolean value specifying whether or not to display a scrollbar. */
    showScrollbar?: boolean;
}
/** The TileView widget contains a collection of tiles. Tiles can store much more information than ordinary buttons, that is why they are very popular in apps designed for touch devices. */
export default class dxTileView extends CollectionWidget {
    constructor(element: Element, options?: dxTileViewOptions)
    constructor(element: JQuery, options?: dxTileViewOptions)
    
    scrollPosition(): number;
}

/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface dxTileViewItem extends CollectionWidgetItem {
    /** Specifies a multiplier for the baseItemHeight option value (for the purpose of obtaining the actual item height). */
    heightRatio?: number;
    /** Specifies a multiplier for the baseItemWidth option value (for the purpose of obtaining the actual item width). */
    widthRatio?: number;
}

declare global {
interface JQuery {
    dxTileView(): JQuery;
    dxTileView(options: "instance"): dxTileView;
    dxTileView(options: string): any;
    dxTileView(options: string, ...params: any[]): any;
    dxTileView(options: dxTileViewOptions): JQuery;
}
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export type Options = dxTileViewOptions;

/** @deprecated use Options instead */
/** Warning! This type is used for internal purposes. Do not import it directly. */
export type IOptions = dxTileViewOptions;