Vue TileView - Customize Tile Appearance
For a minor customization of tiles, you can define specific fields in item data objects. For example, the following code generates three tiles: the first is disabled, the second is not customized, the third is hidden.
- <template>
- <DxTileView :data-source="dataSource"/>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTileView } from 'devextreme-vue/tile-view';
- export default {
- components: {
- DxTileView
- },
- data() {
- return {
- dataSource: [
- { text: 'Alabama', disabled: true },
- { text: 'Alaska' },
- { text: 'Arizona', visible: false }
- ]
- };
- }
- }
- </script>
If you need a more flexible solution, define an itemTemplate.
App.vue
- <template>
- <DxTileView
- :data-source="tileViewData"
- :item-margin="15"
- :base-item-height="80"
- :base-item-width="140"
- item-template="tile">
- <template #tile="{ data }">
- <div>
- <p style="font-size:larger"><b>{{data.name}}</b></p>
- <p>Capital: <i>{{data.capital}}</i></p>
- </div>
- </template>
- </DxTileView>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxTileView from "devextreme-vue/tile-view";
- export default {
- components: {
- DxTileView
- },
- data() {
- return {
- tileViewData: [
- { name: "Alabama", capital: "Montgomery" },
- { name: "Alaska", capital: "Juneau" },
- { name: "Arizona", capital: "Phoenix" },
- // ...
- ]
- };
- }
- };
- </script>
- <style>
- .tile {
- border-radius: .5em;
- text-align: center;
- color: white;
- background: gray;
- }
- </style>
You can also customize individual tiles. Declare them using the dxItem component.
- <template>
- <DxTileView>
- <DxItem>
- <template #default>
- <span>User</span>
- </template>
- </DxItem>
- <DxItem>
- <template #default>
- <span>Comment</span>
- </template>
- </DxItem>
- </DxTileView>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxTileView, { DxItem } from "devextreme-vue/tile-view";
- export default {
- components: {
- DxTileView,
- DxItem
- }
- };
- </script>
Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.