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

Integrate avatar into Listview in React Avatar component

14 Apr 2021 / 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
index.tsx
index.html
index.css
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"));
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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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);
}
Previous
Next