listview-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/listview/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <!-- Listview element -->\n    <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n    .control-section {\n        overflow: auto;\n    }\n\n    /* Listview Customization */\n\n    #letterAvatarList {\n        max-width: 350px;\n        margin: auto;\n        border: 1px solid #dddddd;\n        border-radius: 3px;\n    }\n\n    #letterAvatarList .listWrapper {\n        width: inherit;\n        height: inherit;\n        position: relative;\n    }\n\n    #letterAvatarList .e-list-header {\n        height: 54px;\n    }\n\n    .material #letterAvatarList .e-list-header .e-text {\n        line-height: 22px;\n    }\n\n    .fabric #letterAvatarList .e-list-header .e-text {\n        line-height: 22px;\n    }\n\n    .bootstrap #letterAvatarList .e-list-header .e-text {\n        line-height: 13px;\n    }\n\n    .highcontrast #letterAvatarList .e-list-header .e-text {\n        line-height: 20px;\n    }\n\n    #letterAvatarList .e-list-item {\n        cursor: pointer;\n        height: 50px;\n        line-height: 44px;\n        border: 0;\n    }\n\n    /* Badge Positioning */\n\n    #letterAvatarList .e-badge {\n        margin-top: 12px;\n    }\n\n    #letterAvatarList .listWrapper .list-text {\n        width: 60%;\n        display: inline-block;\n        vertical-align: middle;\n        margin: 0 50px;\n    }\n\n    /* Avatar Positioning */\n\n    #letterAvatarList .listWrapper .e-avatar {\n        position: absolute;\n        top: calc(100% - 40px);\n        font-size: 10px;\n        left: 5px;\n    }\n\n    /* Avatar Background Customization */\n\n    #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n        background-color: #039BE5;\n    }\n\n    #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n        background-color: #E91E63;\n    }\n\n    #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n        background-color: #009688;\n    }\n\n    /* Avatar images using 'background-image' property */\n\n    .pic01 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png');\n    }\n\n    .pic02 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic02.png');\n    }\n\n    .pic03 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic03.png');\n    }\n\n    .pic04 {\n        background-image: url('//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic04.png');\n    }\n\n    .bootstrap4 #letterAvatarList .e-list-item {\n        line-height: 30px;\n        padding: 8px 16px 8px 16px;\n    }\n\n    .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n        top: calc(100% - 48px);\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Avatar listview\n */\n\n    var letterAvatarList = new ej.lists.ListView({\n        // Bind listview datasource\n        dataSource: window.dataSource,\n        // Assign header title\n        headerTitle: 'Contacts',\n        // Enable header title\n        showHeader: true,\n        // Assign list-item template\n        template: '<div class=\"listWrapper\">' +\n            '${if(avatar!==\"\")}' +\n            '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n            '${else}' +\n            '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n            '${/if}' +\n            '<span class=\"list-text\">' +\n            '${text} </span> </div>',\n        // Assign sorting order\n        sortOrder: 'Ascending'\n    });\n    letterAvatarList.appendTo('#letterAvatarList');\n"}