React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Integrate avatar into Listview in React Avatar component

18 May 2022 / 2 minutes to read

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.

Source
Preview
App.jsx
index.jsx
index.html
index.css
App.tsx
index.tsx
Copied to clipboard
Copied to clipboard
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"));
Copied to clipboard
<!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>
Copied to clipboard
#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);
}
Copied to clipboard
Copied to clipboard
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"));
Previous
Next