Skip to content

Commit 7ce812c

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #478 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents 526a069 + d906f7c commit 7ce812c

31 files changed

+1315
-8
lines changed

‎ej2-react-toc.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,11 @@
402402
<li><a href="/ej2-react/carousel/animations-and-transitions">Animations and Transitions</a></li>
403403
<li><a href="/ej2-react/carousel/accessibility">Accessibility</a></li>
404404
<li><a href="/ej2-react/carousel/styles-and-appearance">Styles and Appearances</a></li>
405+
<li>How To
406+
<ul>
407+
<li><a href="/ej2-react/carousel/how-to/load-images-in-webp-format.md">Load images in webp format</a></li>
408+
</ul>
409+
</li>
405410
</ul>
406411
</li><li>
407412
Chart

‎ej2-react/carousel/how-to/load-images-in-webp-format.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
layout: post
3+
title: Load webp format image in React Carousel component | Syncfusion
4+
description: Learn here all about how to load webp format image in Syncfusion React Carousel component of Syncfusion Essential JS 2 and more.
5+
control: Load images in webp format
6+
platform: ej2-react
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load webp format image in React carousel component
12+
13+
You can load the carousel image in the webp format, which aims to create smaller, better-looking images. Choosing webp as your image format can significantly improve your website's performance without sacrificing visual quality. webp images are significantly smaller in file size compared to formats like JPEG and PNG. This results in faster load times and less data usage. To achieve this, you can convert your image format to webp and pass them to Carousel items. The following sample illustrates how to load a carousel image in the webp format component.
14+
15+
{% tabs %}
16+
{% highlight js tabtitle="index.jsx" %}
17+
{% include code-snippet/accordion/accordion-disable-cs1/app/index.jsx %}
18+
{% endhighlight %}
19+
{% highlight ts tabtitle="index.tsx" %}
20+
{% include code-snippet/accordion/accordion-disable-cs1/app/index.tsx %}
21+
{% endhighlight %}
22+
{% highlight html tabtitle="index.html" %}
23+
{% include code-snippet/accordion/accordion-disable-cs1/index.html %}
24+
{% endhighlight %}
25+
{% highlight css tabtitle="index.css" %}
26+
{% include code-snippet/accordion/accordion-disable-cs1/index.css %}
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
{% previewsample "page.domainurl/code-snippet/accordion/accordion-disable-cs1" %}

‎ej2-react/code-snippet/carousel/default-webp/app/index.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
2+
import * as React from "react";
3+
import * as ReactDOM from "react-dom";
4+
const App = () => {
5+
return (<div className='control-container'>
6+
<CarouselComponent animationEffect="Fade">
7+
<CarouselItemsDirective>
8+
<CarouselItemDirective template='<figure class="img-container"><img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" /><figcaption class="img-caption">Majestic Valley View</figcaption></figure>'/>
9+
<CarouselItemDirective template='<figure class="img-container"><img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" /><figcaption class="img-caption">Thrilling Rapids Adventure</figcaption></figure>'/>
10+
<CarouselItemDirective template='<figure class="img-container"><img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" /><figcaption class="img-caption">Snowy Stroll</figcaption></figure>'/>
11+
</CarouselItemsDirective>
12+
</CarouselComponent>
13+
</div>);
14+
}
15+
const root = ReactDOM.createRoot(document.getElementById('element'));
16+
root.render(<App />);

‎ej2-react/code-snippet/carousel/default-webp/app/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
2+
import * as React from "react";
3+
import * as ReactDOM from "react-dom";
4+
5+
const App = () => {
6+
return (
7+
<div className='control-container'>
8+
<CarouselComponent animationEffect="Fade">
9+
<CarouselItemsDirective>
10+
<CarouselItemDirective template='<figure class="img-container"><img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" /><figcaption class="img-caption">Majestic Valley View</figcaption></figure>'/>
11+
<CarouselItemDirective template='<figure class="img-container"><img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" /><figcaption class="img-caption">Thrilling Rapids Adventure</figcaption></figure>'/>
12+
<CarouselItemDirective template='<figure class="img-container"><img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" /><figcaption class="img-caption">Snowy Stroll</figcaption></figure>'/>
13+
</CarouselItemsDirective>
14+
</CarouselComponent>
15+
</div>
16+
);
17+
}
18+
19+
const root = ReactDOM.createRoot(document.getElementById('element'));
20+
root.render(<App />);
21+
22+

‎ej2-react/code-snippet/carousel/default-webp/index.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.control-container {
2+
height: 360px;
3+
margin: 0 auto;
4+
width: 600px;
5+
}
6+
7+
.img-container {
8+
height: 100%;
9+
margin: 0;
10+
}
11+
12+
.img-caption {
13+
color: #fff;
14+
font-size: 1rem;
15+
position: absolute;
16+
bottom: 3rem;
17+
width: 100%;
18+
text-align: center;
19+
}

‎ej2-react/code-snippet/carousel/default-webp/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React Carousel</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Essential JS 2 for React Components" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://cdn.syncfusion.com/ej2/26.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/26.1.35/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
13+
<link href="index.css" rel="stylesheet" />
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
15+
<script src="systemjs.config.js"></script>
16+
</head>
17+
18+
<body>
19+
<div id='element'>
20+
<div id='loader'>Loading....</div>
21+
</div>
22+
</body>
23+
24+
</html>

‎ej2-react/code-snippet/carousel/default-webp/systemjs.config.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/",
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
22+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
23+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
24+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
25+
"@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",
26+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
27+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
28+
'@syncfusion/ej2-buttons': 'syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js',
29+
'@syncfusion/ej2-data': 'syncfusion:ej2-data/dist/ej2-data.umd.min.js',
30+
'@syncfusion/ej2-lists': 'syncfusion:ej2-lists/dist/ej2-lists.umd.min.js',
31+
'@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js',
32+
'@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js',
33+
'@syncfusion/ej2-splitbuttons': 'syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js',
34+
"react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
35+
"react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
36+
},
37+
packages: {
38+
'app': { main: 'index', defaultExtension: 'tsx' },
39+
}
40+
});
41+
42+
System.import('app');

‎ej2-react/code-snippet/chart/series/line-cs32/app/index.jsx

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,30 @@
33
import * as React from "react";
44
import * as ReactDOM from "react-dom";
55
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
6-
import { scatterData } from 'datasource.ts';
76
function App() {
7+
const scatterData = [
8+
{ height: 130, male: 35, female: 32 },
9+
{ height: 132, male: 38, female: 33 },
10+
{ height: 135, male: 41, female: 38 },
11+
{ height: 137, male: 43, female: 40 },
12+
{ height: 140, male: 45, female: 42 },
13+
{ height: 142, male: 46, female: 42.5 },
14+
{ height: 145, male: 48, female: 43 },
15+
{ height: 147, male: 50, female: 44 },
16+
{ height: 150, male: 52, female: 45 },
17+
{ height: 152, male: 55, female: 45 },
18+
{ height: 155, male: 58, female: 46 },
19+
{ height: 157, male: 60, female: 48 },
20+
{ height: 160, male: 63, female: 51 },
21+
{ height: 162, male: 70, female: 54 },
22+
{ height: 165, male: 75, female: 58 },
23+
{ height: 167, male: 78, female: 62 },
24+
{ height: 170, male: 82, female: 68 },
25+
{ height: 172, male: 87, female: 72 },
26+
{ height: 175, male: 89, female: 78 },
27+
{ height: 177, male: 92, female: 82 },
28+
{ height: 180, male: 95, female: 85 }
29+
];
830
const primaryxAxis = {
931
title: 'Height (cm)', minimum: 130, maximum: 180,
1032
edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

‎ej2-react/code-snippet/chart/series/line-cs32/app/index.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,31 @@ import * as ReactDOM from "react-dom";
55
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
66
Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
77
from'@syncfusion/ej2-react-charts';
8-
import { scatterData } from 'datasource.ts';
98

109
function App() {
11-
10+
const scatterData: any[] = [
11+
{ height: 130, male: 35, female: 32 },
12+
{ height: 132, male: 38, female: 33 },
13+
{ height: 135, male: 41, female: 38 },
14+
{ height: 137, male: 43, female: 40 },
15+
{ height: 140, male: 45, female: 42 },
16+
{ height: 142, male: 46, female: 42.5 },
17+
{ height: 145, male: 48, female: 43 },
18+
{ height: 147, male: 50, female: 44 },
19+
{ height: 150, male: 52, female: 45 },
20+
{ height: 152, male: 55, female: 45 },
21+
{ height: 155, male: 58, female: 46 },
22+
{ height: 157, male: 60, female: 48 },
23+
{ height: 160, male: 63, female: 51 },
24+
{ height: 162, male: 70, female: 54 },
25+
{ height: 165, male: 75, female: 58 },
26+
{ height: 167, male: 78, female: 62 },
27+
{ height: 170, male: 82, female: 68 },
28+
{ height: 172, male: 87, female: 72 },
29+
{ height: 175, male: 89, female: 78 },
30+
{ height: 177, male: 92, female: 82 },
31+
{ height: 180, male: 95, female: 85 }
32+
];
1233
const primaryxAxis: AxisModel = {
1334
title: 'Height (cm)', minimum: 130, maximum: 180,
1435
edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

‎ej2-react/code-snippet/chart/series/scatter-cs/app/index.jsx

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,30 @@
33
import * as React from "react";
44
import * as ReactDOM from "react-dom";
55
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
6-
import { scatterData } from 'datasource.ts';
76
function App() {
7+
const scatterData = [
8+
{ height: 130, male: 35, female: 32 },
9+
{ height: 132, male: 38, female: 33 },
10+
{ height: 135, male: 41, female: 38 },
11+
{ height: 137, male: 43, female: 40 },
12+
{ height: 140, male: 45, female: 42 },
13+
{ height: 142, male: 46, female: 42.5 },
14+
{ height: 145, male: 48, female: 43 },
15+
{ height: 147, male: 50, female: 44 },
16+
{ height: 150, male: 52, female: 45 },
17+
{ height: 152, male: 55, female: 45 },
18+
{ height: 155, male: 58, female: 46 },
19+
{ height: 157, male: 60, female: 48 },
20+
{ height: 160, male: 63, female: 51 },
21+
{ height: 162, male: 70, female: 54 },
22+
{ height: 165, male: 75, female: 58 },
23+
{ height: 167, male: 78, female: 62 },
24+
{ height: 170, male: 82, female: 68 },
25+
{ height: 172, male: 87, female: 72 },
26+
{ height: 175, male: 89, female: 78 },
27+
{ height: 177, male: 92, female: 82 },
28+
{ height: 180, male: 95, female: 85 }
29+
];
830
const primaryxAxis = {
931
title: 'Height (cm)', minimum: 130, maximum: 180,
1032
edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

‎ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,31 @@ import * as ReactDOM from "react-dom";
55
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
66
Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
77
from'@syncfusion/ej2-react-charts';
8-
import { scatterData } from 'datasource.ts';
98

109
function App() {
11-
10+
const scatterData: any[] = [
11+
{ height: 130, male: 35, female: 32 },
12+
{ height: 132, male: 38, female: 33 },
13+
{ height: 135, male: 41, female: 38 },
14+
{ height: 137, male: 43, female: 40 },
15+
{ height: 140, male: 45, female: 42 },
16+
{ height: 142, male: 46, female: 42.5 },
17+
{ height: 145, male: 48, female: 43 },
18+
{ height: 147, male: 50, female: 44 },
19+
{ height: 150, male: 52, female: 45 },
20+
{ height: 152, male: 55, female: 45 },
21+
{ height: 155, male: 58, female: 46 },
22+
{ height: 157, male: 60, female: 48 },
23+
{ height: 160, male: 63, female: 51 },
24+
{ height: 162, male: 70, female: 54 },
25+
{ height: 165, male: 75, female: 58 },
26+
{ height: 167, male: 78, female: 62 },
27+
{ height: 170, male: 82, female: 68 },
28+
{ height: 172, male: 87, female: 72 },
29+
{ height: 175, male: 89, female: 78 },
30+
{ height: 177, male: 92, female: 82 },
31+
{ height: 180, male: 95, female: 85 }
32+
];
1233
const primaryxAxis: AxisModel = {
1334
title: 'Height (cm)', minimum: 130, maximum: 180,
1435
edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

‎ej2-react/code-snippet/grid/template-cs8/app/App.jsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
2+
import * as React from 'react';
3+
import { data } from './datasource';
4+
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
5+
6+
function App() {
7+
const progressbarTemplate = ((props) => {
8+
return (
9+
<div>
10+
<ProgressBarComponent id={props.OrderID} type='Linear' height='60'
11+
value={props.Freight} trackThickness={24} progressThickness='20'></ProgressBarComponent>
12+
</div>
13+
)
14+
})
15+
return (
16+
<div>
17+
<GridComponent dataSource={data} height={315} enableHover={false}>
18+
<ColumnsDirective>
19+
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
20+
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
21+
<ColumnDirective field='Freight' headerText='Freight' width='120' template={progressbarTemplate}/>
22+
</ColumnsDirective>
23+
</GridComponent></div>)
24+
}
25+
export default App;

‎ej2-react/code-snippet/grid/template-cs8/app/App.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
2+
import * as React from 'react';
3+
import { data } from './datasource';
4+
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
5+
6+
function App() {
7+
const progressbarTemplate = ((props: any) => {
8+
return (
9+
<div>
10+
<ProgressBarComponent id={props.OrderID} type='Linear' height='60'
11+
value={props.Freight} trackThickness={24} progressThickness='20'></ProgressBarComponent>
12+
</div>
13+
)
14+
})
15+
return (
16+
<div>
17+
<GridComponent dataSource={data} height={315} enableHover={false}>
18+
<ColumnsDirective>
19+
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
20+
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
21+
<ColumnDirective field='Freight' headerText='Freight' width='120' template={progressbarTemplate}/>
22+
</ColumnsDirective>
23+
</GridComponent></div>)
24+
}
25+
export default App;

0 commit comments

Comments
 (0)