Vue TileView - Overview

The TileView UI component 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
    ],
    // ...
})

Vue

Code

<template>
    <DxTileView :data-source="dataSource"/>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxTileView } from 'devextreme-vue/tile-view';

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            dataSource: [
                { text: 'Alabama' },
                { text: 'Alaska' },
                { text: 'Arizona' },
                // ...
            ]
        };
    }
}
</script>

React

Code

import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { TileView } from 'devextreme-react/tile-view';

const dataSource = [
    { text: 'Alabama' },
    { text: 'Alaska' },
    { text: 'Arizona' },
    // ...
];

export default function App() {
    return (
        <TileView dataSource={dataSource}/>
    );
}

Note that field names in these data source items are conventional. This provides a default tile appearance, which can be customized later.

By default, the UI component is oriented horizontally, but you can orient it vertically using the direction property.

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
    ],
    // ...
})

Vue

Code

<template>
    <DxTileView direction="vertical"/>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxTileView } from 'devextreme-vue/tile-view';

export default {
    components: {
        DxTileView
    }
}
</script>

React

Code

import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { TileView } from 'devextreme-react/tile-view';

export default function App() {
    return (
        <TileView direction="vertical"/>
    );
}

View Demo