DevExtreme React - Overview

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.

View Demo

The following code adds a primitive TileView to your page.

jQuery
HTML
JavaScript
<div id="tileViewContainer"></div>
$(function() {
    $("#tileViewContainer").dxTileView({
        dataSource: [
            { text: "Alabama" },
            { text: "Alaska" },
            { text: "Arizona" },
            // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-tile-view 
    [dataSource]="tileViewData">
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    tileViewData = [
        { text: "Alabama" },
        { text: "Alaska" },
        { text: "Arizona" },
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})

Note that all data source items in the code above follow the Default Item Template pattern. This provides a default tile appearance, which can be customized later.

By default, the widget is oriented horizontally, but you can orient it vertically using the direction option.

jQuery
JavaScript
$(function() {
    $("#tileViewContainer").dxTileView({
        // ...
        direction: "vertical"
    });
});
Angular
HTML
TypeScript
<dx-tile-view ...
    direction="vertical">
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})

View Demo

See Also