Avatar is integrated into the listview to create contacts applications. The xsmall
size avatar is used to match the size
of the list item. Letters and images are also used as avatar content.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
class ReactApp 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: 'John', pic: 'pic01', avatar: '' },
{ id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
{ id: 's_06', text: 'Margaret', avatar: 'M', pic: 'pic02' },
{ id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
{ id: 's_08', text: 'Michael', pic: 'pic02', avatar: '' }
];
}
template(data) {
let letterAvatar = <span className='e-avatar e-avatar-small e-avatar-circle'>{data.avatar}</span>;
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-small e-avatar-circle`}></span>;
return (<div className='listWrapper'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className='text'>{data.text}</span>
</div>);
}
render() {
return (<div>
<div className="sample_container listview">
<ListViewComponent cssClass='letterAvatarList' dataSource={this.data} headerTitle='Contacts' showHeader={true} sortOrder="Ascending" template={this.template}></ListViewComponent>
</div>
</div>);
}
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Avatar Sample</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.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-lists/styles/material.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id='element'>
<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%;
}
#element {
width: 400px;
margin: auto;
border-radius: 3px;
justify-content: center;
}
/* Listview Customization */
.letterAvatarList {
max-width: 350px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
.letterAvatarList .listWrapper {
width: inherit;
height: inherit;
position: relative;
}
.letterAvatarList .e-list-header {
height: 54px;
}
.material .letterAvatarList .e-list-header .e-text {
line-height: 22px;
}
.fabric .letterAvatarList .e-list-header .e-text {
line-height: 22px;
}
.bootstrap .letterAvatarList .e-list-header .e-text {
line-height: 13px;
}
.highcontrast .letterAvatarList .e-list-header .e-text {
line-height: 20px;
}
.e-listview:not(.e-list-template) .e-list-item {
cursor: pointer;
height: 50px;
line-height: 50px;
border: 0;
}
/* Badge Positioning */
.letterAvatarList .e-badge {
margin-top: 12px;
}
.letterAvatarList .listWrapper .text {
width: 60%;
display: inline-block;
vertical-align: middle;
margin: 0 50px;
}
/* Avatar Positioning */
.letterAvatarList .listWrapper .e-avatar {
position: absolute;
top: calc(100% - 40px);
font-size: 10px;
left: 5px;
}
/* Avatar Background Customization */
.letterAvatarList .e-list-item:nth-child(1) .e-avatar {
background-color: #039BE5;
}
.letterAvatarList .e-list-item:nth-child(3) .e-avatar {
background-color: #E91E63;
}
.letterAvatarList .e-list-item:nth-child(5) .e-avatar {
background-color: #009688;
}
/* Avatar images using 'background-image' property */
.pic01 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
}
.pic02 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/5.png);
}
.pic03 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/7.png);
}
.pic04 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/6.png);
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
class ReactApp 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: 'John', pic: 'pic01', avatar: '' },
{ id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
{ id: 's_06', text: 'Margaret', avatar: 'M', pic: 'pic02' },
{ id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
{ id: 's_08', text: 'Michael', pic: 'pic02', avatar: '' }
];
public template(data: any): JSX.Element {
let letterAvatar = <span className='e-avatar e-avatar-small e-avatar-circle'>{data.avatar}</span>
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-small e-avatar-circle`}></span>
return (
<div className='listWrapper'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className='text'>{data.text}</span>
</div>
);
}
render() {
return (
<div>
<div className="sample_container listview">
{/* ListView element */}
<ListViewComponent cssClass='letterAvatarList' dataSource={this.data} headerTitle='Contacts' showHeader={true}
sortOrder="Ascending" template={this.template as any}></ListViewComponent>
</div>
</div>
);
}
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));