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. public 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>
);
}
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>);
}
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';
export default class App extends React.Component {
constructor() {
super(...arguments);
//Define an array of JSON data
this.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: '' }
];
this.fields = { text: "Name" };
}
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>);
}
render() {
return (<div>
<ListViewComponent id='list' dataSource={this.data} headerTitle='Contacts' showHeader={true} sortOrder="Ascending" width='350px' template={this.listTemplate} fields={this.fields} cssClass='e-list-template'></ListViewComponent>
</div>);
}
}
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.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/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';
export default class App extends React.Component<{}, {}> {
//Define an array of JSON data
public 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: '' }
];
public fields: any = { text: "Name" };
public 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>
);
}
render() {
return (
<div>
{/* ListView element */}
<ListViewComponent id='list' dataSource={this.data} headerTitle='Contacts' showHeader={true}
sortOrder="Ascending" width='350px' template={this.listTemplate as any}
fields={this.fields as any} cssClass='e-list-template'></ListViewComponent>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));