ListTile
Card component to display an item with optional thumbnail and description.
Useful as a search result, with optional highlighting of the search query within the label text.
If the item has a label property, that label will display. Otherwise, the item's value property will display.
Demos
Default
A ListTile can be used to display the thumbnail, label, and description of an item.
<template>
<div>
<cdx-list-tile
:item="item"
search-query="Co"
:highlight-query="true"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CdxListTile from 'vue-components/src/components/list-tile/ListTile.vue';
const item = {
value: 5921,
label: 'Color',
url: 'https://en.wikipedia.org/wiki/Color',
description: 'visual perception of light wavelengths',
thumbnail: {
mimetype: 'image/jpeg',
size: null,
width: 200,
height: 150,
duration: null,
url: '//upload.wikimedia.org/wikipedia/commons/thumb/2/21/64_365_Color_Macro_%285498808099%29.jpg/200px-64_365_Color_Macro_%285498808099%29.jpg'
}
};
export default defineComponent( {
name: 'ListTileDefault',
components: { CdxListTile },
setup() {
return {
item
};
}
} );
</script>
Without thumbnail
<template>
<div>
<cdx-list-tile
:item="item"
search-query="Co"
:highlight-query="true"
:hide-thumbnail="true"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CdxListTile from 'vue-components/src/components/list-tile/ListTile.vue';
const item = {
value: 5921,
label: 'Color',
url: 'https://en.wikipedia.org/wiki/Color',
description: 'visual perception of light wavelengths'
};
export default defineComponent( {
name: 'ListTileHideThumbnail',
components: { CdxListTile },
setup() {
return {
item
};
}
} );
</script>
With long title and default thumbnail
<template>
<div>
<cdx-list-tile
:item="item"
search-query="Donaudampfschiffahrtselektrizit"
:highlight-query="true"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CdxListTile from 'vue-components/src/components/list-tile/ListTile.vue';
const item = {
value: 2201357,
label: 'Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',
url: 'https://en.wikipedia.org/wiki/Donaudampfschiffahrtselektrizit%C3%A4tenhauptbetriebswerkbauunterbeamtengesellschaft',
description: 'Arguably the longest German word',
thumbnail: null
};
export default defineComponent( {
name: 'ListTileLong',
components: { CdxListTile },
setup() {
return {
item
};
}
} );
</script>
Within a list
<template>
<ol>
<li v-for="result in searchResults" :key="result.value">
<cdx-list-tile
:item="result"
:search-query="searchQuery"
:highlight-query="true"
/>
</li>
</ol>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CdxListTile from 'vue-components/src/components/list-tile/ListTile.vue';
import searchResults from '../../typeahead-search/examples/searchResults';
export default defineComponent( {
name: 'ListTileList',
components: { CdxListTile },
setup() {
return {
searchResults,
searchQuery: 'Co'
};
}
} );
</script>
With graphemes
<template>
<ol>
<li v-for="result in searchResults" :key="result.value">
<cdx-list-tile
:item="result"
:search-query="searchQuery"
:highlight-query="true"
/>
</li>
</ol>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CdxListTile from 'vue-components/src/components/list-tile/ListTile.vue';
import searchResults from '../../typeahead-search/examples/searchResultsGraphemes';
export default defineComponent( {
name: 'ListTileListGraphemes',
components: { CdxListTile },
setup() {
return {
searchResults,
searchQuery: 'ইতাল'
};
}
} );
</script>
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|
| item | The item to be displayed. | SearchResult | - | |
| searchQuery | The current search query. | string | - | '' |
| highlightQuery | Whether the query should be highlighted within the label. | boolean | - | false |
| hideThumbnail | Whether the thumbnail should be hidden. | boolean | - | false |
| hideDescription | Whether the description should be hidden. | boolean | - | false |