+{"index.css":"/* Listview Customization */\n\n#letterAvatarList {\n max-width: 350px;\n margin: auto;\n border-radius: 3px;\n}\n\nbody.material #letterAvatarList,\nbody.material-dark #letterAvatarList,\nbody.fabric #letterAvatarList,\nbody.fabric-dark #letterAvatarList,\nbody.bootstrap #letterAvatarList,\nbody.bootstrap-dark #letterAvatarList,\nbody.highcontrast #letterAvatarList{\n border: 1px solid #dddddd;\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\nbody.material #letterAvatarList .e-list-item,\nbody.material-dark #letterAvatarList .e-list-item {\n line-height: 50px;\n}\n\n#letterAvatarList .e-list-item {\n cursor: pointer;\n height: 50px;\n line-height: 44px;\n border: 0;\n}\n\n.tailwind #letterAvatarList .e-list-item,\n.tailwind-dark #letterAvatarList .e-list-item {\n line-height: 50px;\n padding-top: 0;\n padding-bottom: 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#letterAvatarList .pic01 {\n background-image: url('https://ej2.syncfusion.com/react/demos/src/avatar/images/pic01.png');\n}\n\n#letterAvatarList .pic02 {\n background-image: url('https://ej2.syncfusion.com/react/demos/src/avatar/images/pic02.png');\n}\n\n#letterAvatarList .pic03 {\n background-image: url('https://ej2.syncfusion.com/react/demos/src/avatar/images/pic03.png');\n}\n\n#letterAvatarList .pic04 {\n background-image: url('https://ej2.syncfusion.com/react/demos/src/avatar/images/pic04.png');\n}\n\n.bootstrap4 #letterAvatarList .e-list-item,\n.bootstrap5 #letterAvatarList .e-list-item,\n.bootstrap5-dark #letterAvatarList .e-list-item {\n line-height: 30px;\n padding: 8px 16px 8px 16px;\n}\n\nbody.bootstrap4 #letterAvatarList .e-list-item .e-avatar{\n top: calc(100% - 28px);\n}\n\n.tailwind-dark #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 40px);\n}\n\n.bootstrap5 #letterAvatarList .e-list-item .e-avatar,\n.bootstrap5-dark #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 30px);\n}\n\n.fabric #letterAvatarList .e-list-item .e-avatar,\n.fabric-dark #letterAvatarList .e-list-item .e-avatar,\n.bootstrap #letterAvatarList .e-list-item .e-avatar,\n.bootstrap-dark #letterAvatarList .e-list-item .e-avatar,\n.highcontrast #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 35px);\n}\n\nbody.bootstrap #letterAvatarList .e-list-item,\nbody.bootstrap-dark #letterAvatarList .e-list-item {\n line-height: 45px;\n}","datasource.js":"\"use strict\";\n/**\n * listview DataSource\n */\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.listData = [\n { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },\n { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },\n { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },\n { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },\n { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },\n { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },\n { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }\n];\n","index.html":"<!DOCTYPE html>\n<html>\n<head>\n <title>Syncfusion React Sample</title>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\n <meta name=\"description\" content=\"Syncfusion React UI Components\" />\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"https://cdn.syncfusion.com/ej2/{{theme}}.css\" rel=\"stylesheet\">\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\n</head>\n\n<body class=\"{{theme}}\">\n <div id='sample'>\n</body>\n</html>\n","index.js":"import { render } from 'react-dom';\nimport './index.css';\nimport * as React from 'react';\nimport { ListViewComponent } from '@syncfusion/ej2-react-lists';\nimport { SampleBase } from './sample-base';\n\nimport { listData } from './datasource';\n// * Sample for CSS avatar component\nexport class Listview extends SampleBase {\n // Set customized list template\n listTemplate(data) {\n let letterAvatar = <span className='e-avatar e-avatar-small e-avatar-circle'>{data.avatar}</span>;\n let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-small e-avatar-circle`}></span>;\n return (<div className='listWrapper'>\n {data.avatar !== \"\" ? (letterAvatar) : (imageAvatar)}\n <span className='list-text'>{data.text}</span>\n </div>);\n }\n render() {\n return (<div className='control-pane' style={{ \"margin-top\": \"10px\" }}>\n <div className=\"sample_container listview\">\n \n <ListViewComponent id='letterAvatarList' dataSource={listData} headerTitle='Contacts' showHeader={true} sortOrder=\"Ascending\" template={this.listTemplate}></ListViewComponent>\n </div>\n\n\n </div>);\n }\n}\n\nrender(<Listview />, document.getElementById('sample'));","sample-base.js":"import * as React from 'react';\n {{ripple}}\n export class SampleBase extends React.PureComponent {\n rendereComplete() {\n /**custom render complete function */\n }\n componentDidMount() {\n setTimeout(() => {\n this.rendereComplete();\n });\n }\n }\n ","dependencies":"{\"@syncfusion/ej2\": \"*\",\"@syncfusion/ej2-react-base\": \"*\",\"@syncfusion/ej2-react-layouts\": \"*\",\"@syncfusion/ej2-react-buttons\": \"*\",\"@syncfusion/ej2-react-grids\": \"*\",\"@syncfusion/ej2-react-inputs\": \"*\",\"@syncfusion/ej2-react-lists\": \"*\",\"@syncfusion/ej2-react-charts\": \"*\",\"@syncfusion/ej2-react-maps\": \"*\",\"@syncfusion/ej2-react-circulargauge\": \"*\",\"@syncfusion/ej2-react-dropdowns\": \"*\",\"@syncfusion/ej2-react-popups\": \"*\",\"@syncfusion/ej2-react-navigations\": \"*\",\"@syncfusion/ej2-react-richtexteditor\": \"*\",\"@syncfusion/ej2-react-calendars\": \"*\",\"@syncfusion/ej2-react-lineargauge\": \"*\",\"@syncfusion/ej2-react-schedule\": \"*\",\"@syncfusion/ej2-react-splitbuttons\": \"*\"}"}
0 commit comments