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
.
let dataSource = [
{
text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01"
},
{
text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: ""
}
];
let dataSource = [
{
text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01"
},
{
text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: ""
}
];
avatar
classes in ListView template to customize contact icon. In the following codes, medium size avatar has been
set using the class name e-avatar e-avatar-circle
from data source. function listTemplate(data): JSX.Element {
let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>
return (
<div className='e-list-wrapper e-list-multi-line e-list-avatar'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className="e-list-content">{data.contact}</span>
</div>
);
}
function listTemplate(data) {
let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>;
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>;
return (<div className='e-list-wrapper e-list-multi-line e-list-avatar'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className="e-list-content">{data.contact}</span>
</div>);
}
Avatars can be set in different sizes in avatar classes. To know more about avatar classes, refer to Avatar.
sortOder
property of ListView.showHeader
property, and set the
headerTitle
as Contacts
.import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
//Define an array of JSON data
let data = [
{ id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
{ id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
{ id: 's_05', text: 'Jenifer', pic: 'pic01', avatar: '' },
{ id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
{ id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },
{ id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
{ id: 's_08', text: 'Michael', avatar: 'M', pic: '' }
];
let fields = { text: "Name" };
function listTemplate(data) {
let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>;
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>;
return (<div className='e-list-wrapper e-list-avatar'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className="e-list-content">{data.text}</span>
</div>);
}
return (<div>
<ListViewComponent id='list' dataSource={data} headerTitle='Contacts' showHeader={true} sortOrder="Ascending" width='350px' template={listTemplate} fields={fields} cssClass='e-list-template'></ListViewComponent>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#list {
margin: 0 auto;
font-size: 15px;
border: 1px solid #ccc;
}
.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-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;
}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
//Define an array of JSON data
let data: { [key: string]: Object }[] = [
{ id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
{ id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
{ id: 's_05', text: 'Jenifer', pic: 'pic01', avatar: '' },
{ id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
{ id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },
{ id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
{ id: 's_08', text: 'Michael', avatar: 'M', pic: '' }
];
let fields: any = { text: "Name" };
function listTemplate(data: any): JSX.Element {
let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>
return (
<div className='e-list-wrapper e-list-avatar'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className="e-list-content">{data.text}</span>
</div>
);
}
return (
<div>
{/* ListView element */}
<ListViewComponent id='list' dataSource={data} headerTitle='Contacts' showHeader={true}
sortOrder="Ascending" width='350px' template={listTemplate as any}
fields={fields as any} cssClass='e-list-template'></ListViewComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));