Having trouble getting help?
Contact Support
Contact Support
Create mobile contact layout from ListView in Vue ListView component
19 Feb 202515 minutes to read
You can customize the ListView using the template property. Refer to the following steps to customize ListView as mobile contact view with our ej2-avatar
.
-
Render the ListView with a dataSource that contains avatar data. You can set avatar data as either text or class names. Refer to the following codes.
dataSource: [ { text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01" }, { text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" } ];
-
Set
avatar
classes in ListView template to customize contact icon. In the following codes, medium size avatar has been set using the class namee-avatar e-avatar-circle
from data source.<div class="listWrapper"> <span :class="['e-avatar e-avatar-small e-avatar-circle']" v-if="data.avatar !== ''"></span> <span :class="[data.pic + ' e-avatar e-avatar-small e-avatar-circle']" v-if="data.pic !== '' "> </span> <span class="list-text"></span> </div>
Avatars can be set in different sizes in avatar classes. To know more about avatar classes, refer to Avatar.
- Sort the contact names using the
sortOder
property of ListView. - Enable the
showHeader
property, and set theheaderTitle
asContacts
.
<template>
<div id="sample">
<ejs-listview id='list' :dataSource='data' :fields='fields' :template='template' height="330px" width="350px" showHeader='true' headerTitle='Contacts' sortOrder='Ascending'></ejs-listview>
</div>
</template>
<script setup>
import { ListViewComponent as EjsListview} from "@syncfusion/ej2-vue-lists";
import { createApp } from "vue";
var demoVue = createApp().component("demo", {
template: `
<div class="settings">
<span :class="['e-avatar e-avatar-circle']" v-if="data.avatar !== ''"></span>
<span :class="[data.pic + ' e-avatar e-avatar-circle']" v-if="data.pic !== '' "> </span>
<div id="content">
<div class="name"></div>
<div id="info"></div>
</div>
</div>`,
data() {
return {
data: {}
};
}
});
const data = [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{
text: "Amenda",
contact: "(206) 555-3412",
id: "2",
avatar: "A",
pic: "" },
{
text: "Isabella",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "William ",
contact: "(206) 555-9482",
id: "5",
avatar: "W",
pic: ""
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{
text: "Matthew",
contact: "(71) 555-7773",
id: "7",
avatar: "M",
pic: ""
},
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
},
{
text: "Charlotte",
contact: "(206) 555-1189",
id: "9",
avatar: "C",
pic: ""
}
];
const fields = {text: 'text'};
const template = () => {
return { template : demoVue};
};
</script>
<style>
#list {
margin: 0 auto;
border: 1px solid #ccc;
}
#list .e-list-item {
height: 60px;
cursor: pointer;
}
#list .e-list-header .e-text {
font-family: sans-serif;
font-size: 18px;
line-height: 16px;
}
#list #content {
gin: 0;
}
#list .e-list-header{
background: rgb(2, 120, 215);
color: white;
}
#list #info,
#list .name {
font-size: 14px;
margin: 0 60px;
line-height: 20px;
}
#list .name {
padding-top: 8px;
font-weight: 500;
}
.pic01 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}
.pic02 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}
.pic03 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}
.pic04 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
}
#list .e-avatar {
position: absolute;
margin-top: 8px;
font-size: 14px;
}
#list .e-list-item:nth-child(1) .e-avatar {
background-color: #039be5;
}
#list .e-list-item:nth-child(2) .e-avatar {
background-color: #e91e63;
}
#list .e-list-item:nth-child(6) .e-avatar {
background-color: #009688;
}
#list .e-list-item:nth-child(8) .e-avatar {
background-color: #0088;
}
</style>
<template>
<div id="sample">
<ejs-listview id='list' :dataSource='data' :fields='fields' :template='template' height="330px" width="350px" showHeader='true' headerTitle='Contacts' sortOrder='Ascending'></ejs-listview>
</div>
</template>
<script>
import { ListViewComponent } from "@syncfusion/ej2-vue-lists";
import { createApp } from "vue";
var demoVue = createApp().component("demo", {
template: `
<div class="settings">
<span :class="['e-avatar e-avatar-circle']" v-if="data.avatar !== ''"></span>
<span :class="[data.pic + ' e-avatar e-avatar-circle']" v-if="data.pic !== '' "> </span>
<div id="content">
<div class="name"></div>
<div id="info"></div>
</div>
</div>`,
data() {
return {
data: {}
};
}
});
export default {
name: "App",
components: {
"ejs-listview":ListViewComponent
},
data: function() {
return {
data: [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{
text: "Amenda",
contact: "(206) 555-3412",
id: "2",
avatar: "A",
pic: ""
},
{
text: "Isabella",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "William ",
contact: "(206) 555-9482",
id: "5",
avatar: "W",
pic: ""
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{
text: "Matthew",
contact: "(71) 555-7773",
id: "7",
avatar: "M",
pic: "" },
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
},
{
text: "Charlotte",
contact: "(206) 555-1189",
id: "9",
avatar: "C",
pic: ""
}
],
fields: {text: 'text'},
template: function () {
return { template : demoVue};
}
};
},
}
</script>
<style>
#list {
margin: 0 auto;
border: 1px solid #ccc;
}
#list .e-list-item {
height: 60px;
cursor: pointer;
}
#list .e-list-header .e-text {
font-family: sans-serif;
font-size: 18px;
line-height: 16px;
}
#list #content {
gin: 0;
}
#list .e-list-header{
background: rgb(2, 120, 215);
color: white;
}
#list #info,
#list .name {
font-size: 14px;
margin: 0 60px;
line-height: 20px;
}
#list .name {
padding-top: 8px;
font-weight: 500;
}
.pic01 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}
.pic02 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}
.pic03 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}
.pic04 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
}
#list .e-avatar {
position: absolute;
margin-top: 8px;
font-size: 14px;
}
#list .e-list-item:nth-child(1) .e-avatar {
background-color: #039be5;
}
#list .e-list-item:nth-child(2) .e-avatar {
background-color: #e91e63;
}
#list .e-list-item:nth-child(6) .e-avatar {
background-color: #009688;
}
#list .e-list-item:nth-child(8) .e-avatar {
background-color: #0088;
}
</style>