Search results

Integrate avatar into ListView

Avatar can be integrated into various controls to make a wide variety of applications. Some of the integrations are shown in the following section.

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.html
index.ts
index.css
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Avatar </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Avatar UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <!-- Listview element -->
            <div id="letterAvatarList"></div>
        </div>
    </div>
</body>

</html>
import { ListView } from '@syncfusion/ej2-lists';
// Listview datasource with avatar and image source fields
let dataSource: { [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: 'Michael', pic: 'pic02', avatar: '' },
    { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
    { id: 's_08', text: 'Margaret', avatar: 'M', pic: '' }
];

let letterAvatarList: ListView = new ListView({
    // Bind listview datasource
    dataSource: dataSource,
    // Assign header title
    headerTitle: 'Contacts',
    // Enable header title
    showHeader: true,
    // Assign list-item template
    template: '<div class="listWrapper">' +
        '${if(avatar!=="")}' +
        '<span class="e-avatar e-avatar-small e-avatar-circle">${avatar}</span>' +
        '${else}' +
        '<span class="${pic} e-avatar e-avatar-small e-avatar-circle"> </span>' +
        '${/if}' +
        '<span class="text">' +
        '${text} </span> </div>',
    // Assign sorting order
    sortOrder: 'Ascending'
});
letterAvatarList.appendTo('#letterAvatarList');
#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;
}

#letterAvatarList .e-list-item {
    cursor: pointer;
    height: 50px;
    line-height: 44px;
    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/8.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/5.png");
}