The Syncfusion Essential JS2 components are desktop and mobile-friendly. So, you can use Syncfusion components in both modes. The component templates are not always fixed. Applications may need to load various templates depending upon the device.
In the ListView component, template support is being used. In some cases, the component wrapper is always responsive
across all devices, but the template contents are dynamically changed with unspecified (sample side) dimensions. CSS
customization is also needed in sample-side to align template content responsively in both mobile and desktop modes. Here,
two templates have been loaded for mobile and desktop modes. To check the device mode, a
browser module
has been imported from the ej2-base
package.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Browser } from '@syncfusion/ej2-base';
export default class App extends React.Component {
constructor(props) {
super(props);
// define the array of Json
this.dataSource = [
{
Name: "IBM Open-Sources Web Sphere Liberty Code",
content: "In September, IBM announced that it would be open-sourcing the code for WebSphere...",
id: "1",
image: "https://ej2.syncfusion.com/demos/src/listview/images/1.png",
timeStamp: "Syncfusion Blog - October 19, 2017"
},
{
Name: "Must Reads: 5 Big Data E-books to upend your development",
content: "Our first e-book was published in May 2012-jQuery Succinctly was the start of over...",
id: "2",
image: "https://ej2.syncfusion.com/demos/src/listview/images/2.png",
timeStamp: "Syncfusion Blog - October 18, 2017"
},
{
Name: "The Syncfusion Global License: Your Questions, Answered ",
content: "Syncfusion recently hosted a webinar to cover the ins and outs of the Syncfusion global...",
id: "4",
image: "https://ej2.syncfusion.com/demos/src/listview/images/3.png",
timeStamp: "Syncfusion Blog - October 18, 2017"
},
{
Name: "Know: What is Coming from Microsoft this Fall ",
content: "On October 17, Microsoft will release its Fall Creators Update for the Windows 10 platform...",
id: "5",
image: "https://ej2.syncfusion.com/demos/src/listview/images/6.png",
timeStamp: "Syncfusion Blog - October 17, 2017"
}
];
this.fields = { text: "Name" };
this.list = null;
if (Browser.isDevice) {
if (this.list) {
this.list.element.style.width = "350px";
}
this.wintemplate = this.mobTemplate;
}
else {
this.wintemplate = this.listTemplate;
}
}
listTemplate(data) {
return (<div className="settings">
<div id="postContainer">
<div id="postImg">
<img src={data.image}/>
</div>
<div id="content">
<div className="name">{data.Name}</div>
<div className="description">{data.content}</div>
<div id="info">
<div id="logo">
<div id="share">
<span className="share"/>{" "}
</div>
<div id="comments">
{" "}
<span className="comments"/>{" "}
</div>
<div id="bookmark">
{" "}
<span className="bookmark"/>{" "}
</div>
</div>
<div className="timeStamp">{data.timeStamp} </div>
</div>
</div>
</div>
</div>);
}
mobTemplate(data) {
return (<div className="settings">
<div id="postContainer">
<div id="postImg">
<img src={data.image}/>
</div>
<div id="content">
<div id="info">
<div id="logo">
<div id="share">
<span className="share"/>{" "}
</div>
<div id="comments">
{" "}
<span className="comments"/>{" "}
</div>
<div id="bookmark">
{" "}
<span className="bookmark"/>{" "}
</div>
</div>
</div>
<div className="name">{data.Name}</div>
<div className="description">{data.content}</div>
<div className="timeStamp">{data.timeStamp} </div>
</div>
</div>
</div>);
}
render() {
return (<div>
<ListViewComponent id="List" ref="list" dataSource={this.dataSource} fields={this.fields} headerTitle="Syncfusion Blog" showHeader={true} template={this.wintemplate}/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</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-react-lists/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#List img {
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid #ccc;
}
#List {
display: block;
max-width: 400px;
margin: auto;
border: 1px solid;
border-color: #c3c3c3;
border-color: rgba(0, 0, 0, 0.12);
}
#List .settings {
height: 170px;
line-height: 70px;
margin-left: 16px;
margin-right: 16px;
}
#List .e-list-item {
height: 170px;
line-height: 70px;
padding: 0;
cursor: pointer;
border-bottom: 0.8px solid #ddd;
}
#time {
line-height: 23px;
margin-top: 13px;
padding-left: 10px;
width: 191px;
}
#img {
float: left;
padding-top: 6px;
padding-left: 0;
padding-right: 20px;
}
#info {
padding-top: 3px;
}
#List .e-list-header {
color: white;
height: 57px;
background-color: #56697f;
padding-left: 15px;
position: relative;
top: -1px;
}
.bootstrap #List .e-list-header .e-text {
line-height: 18px;
}
#List .e-list-header .e-text {
font-family: sans-serif;
font-size: 18px;
line-height: 26px;
}
#List .category {
font-family: "serif";
font-weight: 600;
font-size: 19px;
}
#List .name {
font-size: 15px;
font-weight: 500;
line-height: 23px;
}
#List .content {
line-height: 19px;
font-size: 13px;
font-weight: 200;
}
#List .e-hover {
transition: 0.5s;
}
.timeStamp {
font-size: small;
margin-bottom: 1px;
margin-top: -17px;
}
.bookmark::before {
color: grey;
float: right;
line-height: 0;
margin-bottom: 1px;
font-family: "Bookmarks";
content: "\e700";
margin-left: 3px;
margin-right: 3px;
font-size: 16px;
padding-top: 19px;
padding-bottom: 5px;
}
.share::before {
color: grey;
float: right;
line-height: 0;
margin-bottom: 1px;
font-family: "Bookmarks";
content: "\e701";
margin-left: 3px;
margin-right: 3px;
font-size: 13px;
padding-top: 19px;
padding-bottom: 5px;
}
.comments::before {
color: grey;
float: right;
line-height: 0;
margin-bottom: 1px;
font-family: "Bookmarks";
content: "\e703";
margin-left: 3px;
margin-right: 3px;
font-size: 15px;
padding-top: 19px;
padding-bottom: 5px;
}
.bookmark {
cursor: pointer;
}
.share {
cursor: pointer;
}
.comments {
cursor: pointer;
}
.description {
color: grey;
line-height: 20px;
font-size: 15px;
font-weight: 200;
text-align: justify;
}
/* csslint ignore:start */
@font-face {
font-family: 'Bookmarks';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
/* csslint ignore:end */
#postImg {
margin-right: 25px;
margin-top: 30px;
}
#postContainer {
width: inherit;
margin-top: 10px;
display: inline-flex;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Browser } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
listTemplate(data: any): JSX.Element {
return (
<div className="settings">
<div id="postContainer">
<div id="postImg">
<img src={data.image} />
</div>
<div id="content">
<div className="name">{data.Name}</div>
<div className="description">{data.content}</div>
<div id="info">
<div id="logo">
<div id="share">
<span className="share" />{" "}
</div>
<div id="comments">
{" "}
<span className="comments" />{" "}
</div>
<div id="bookmark">
{" "}
<span className="bookmark" />{" "}
</div>
</div>
<div className="timeStamp">{data.timeStamp} </div>
</div>
</div>
</div>
</div>
);
}
mobTemplate(data: any): JSX.Element {
return (
<div className="settings">
<div id="postContainer">
<div id="postImg">
<img src={data.image} />
</div>
<div id="content">
<div id="info">
<div id="logo">
<div id="share">
<span className="share" />{" "}
</div>
<div id="comments">
{" "}
<span className="comments" />{" "}
</div>
<div id="bookmark">
{" "}
<span className="bookmark" />{" "}
</div>
</div>
</div>
<div className="name">{data.Name}</div>
<div className="description">{data.content}</div>
<div className="timeStamp">{data.timeStamp} </div>
</div>
</div>
</div>
);
}
// define the array of Json
private dataSource: any = [
{
Name: "IBM Open-Sources Web Sphere Liberty Code",
content: "In September, IBM announced that it would be open-sourcing the code for WebSphere...",
id: "1",
image: "https://ej2.syncfusion.com/demos/src/listview/images/1.png",
timeStamp: "Syncfusion Blog - October 19, 2017"
},
{
Name: "Must Reads: 5 Big Data E-books to upend your development",
content: "Our first e-book was published in May 2012-jQuery Succinctly was the start of over...",
id: "2",
image: "https://ej2.syncfusion.com/demos/src/listview/images/2.png",
timeStamp: "Syncfusion Blog - October 18, 2017"
},
{
Name: "The Syncfusion Global License: Your Questions, Answered ",
content: "Syncfusion recently hosted a webinar to cover the ins and outs of the Syncfusion global...",
id: "4",
image: "https://ej2.syncfusion.com/demos/src/listview/images/3.png",
timeStamp: "Syncfusion Blog - October 18, 2017"
},
{
Name: "Know: What is Coming from Microsoft this Fall ",
content: "On October 17, Microsoft will release its Fall Creators Update for the Windows 10 platform...",
id: "5",
image: "https://ej2.syncfusion.com/demos/src/listview/images/6.png",
timeStamp: "Syncfusion Blog - October 17, 2017"
}
];
fields = { text: "Name" };
wintemplate: any;
list: ListViewComponent | null = null;
constructor(props: any) {
super(props);
if (Browser.isDevice) {
if (this.list) {
this.list.element.style.width = "350px";
}
this.wintemplate = this.mobTemplate;
} else {
this.wintemplate = this.listTemplate;
}
}
render() {
return (
<div>
<ListViewComponent
id="List"
ref="list"
dataSource={this.dataSource}
fields={this.fields}
headerTitle="Syncfusion Blog"
showHeader={true}
template={this.wintemplate as any}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));