DOCINFRA-2341_merged_using_automation

ej2-react-toc.html

@@ -402,6 +402,11 @@
 <li><a href="/ej2-react/carousel/animations-and-transitions">Animations and Transitions</a></li>
 <li><a href="/ej2-react/carousel/accessibility">Accessibility</a></li>
 <li><a href="/ej2-react/carousel/styles-and-appearance">Styles and Appearances</a></li>
+<li>How To
+    <ul>
+    <li><a href="/ej2-react/carousel/how-to/load-images-in-webp-format.md">Load images in webp format</a></li>
+    </ul>
+</li>
 </ul>
 </li><li>
 Chart

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

@@ -0,0 +1,30 @@
+---
+layout: post
+title: Load webp format image in React Carousel component | Syncfusion
+description: Learn here all about how to load webp format image in Syncfusion React Carousel component of Syncfusion Essential JS 2 and more.
+control: Load images in webp format 
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load webp format image in React carousel component
+
+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.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/accordion/accordion-disable-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/accordion/accordion-disable-cs1/app/index.tsx %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/accordion/accordion-disable-cs1/index.html %}
+{% endhighlight %}
+{% highlight css tabtitle="index.css" %}
+{% include code-snippet/accordion/accordion-disable-cs1/index.css %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/accordion/accordion-disable-cs1" %}

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

@@ -0,0 +1,16 @@
+import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+const App = () => {
+    return (<div className='control-container'>
+      <CarouselComponent animationEffect="Fade">
+        <CarouselItemsDirective>
+          <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>'/>
+          <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>'/>
+          <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>'/>
+        </CarouselItemsDirective>
+      </CarouselComponent>
+    </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('element'));
+root.render(<App />);

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

@@ -0,0 +1,22 @@
+import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+ const App = () => {
+  return (
+    <div className='control-container'>
+      <CarouselComponent animationEffect="Fade">
+        <CarouselItemsDirective>
+          <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>'/>
+          <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>'/>
+          <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>'/>
+        </CarouselItemsDirective>
+      </CarouselComponent>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('element'));
+root.render(<App />);
+
+

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

@@ -0,0 +1,19 @@
+.control-container {
+	height: 360px;
+	margin: 0 auto;
+	width: 600px;
+}
+
+.img-container {
+	height: 100%;
+	margin: 0;
+}
+
+.img-caption {
+	color: #fff;
+	font-size: 1rem;
+	position: absolute;
+	bottom: 3rem;
+	width: 100%;
+	text-align: center;
+}

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

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Carousel</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="https://cdn.syncfusion.com/ej2/26.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/ej2-navigations/styles/bootstrap5.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>
+</head>
+
+<body>
+    <div id='element'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>

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

@@ -0,0 +1,42 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/",
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        '@syncfusion/ej2-buttons': 'syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js',
+        '@syncfusion/ej2-data': 'syncfusion:ej2-data/dist/ej2-data.umd.min.js',
+        '@syncfusion/ej2-lists': 'syncfusion:ej2-lists/dist/ej2-lists.umd.min.js',
+        '@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js',
+        '@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js',
+        '@syncfusion/ej2-splitbuttons': 'syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js',
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+});
+
+System.import('app');

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

@@ -3,8 +3,30 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
-import { scatterData } from 'datasource.ts';
 function App() {
+    const scatterData = [
+      { height: 130, male: 35, female: 32 },
+      { height: 132, male: 38, female: 33 },
+      { height: 135, male: 41, female: 38 },
+      { height: 137, male: 43, female: 40 },
+      { height: 140, male: 45, female: 42 },
+      { height: 142, male: 46, female: 42.5 },
+      { height: 145, male: 48, female: 43 },
+      { height: 147, male: 50, female: 44 },
+      { height: 150, male: 52, female: 45 },
+      { height: 152, male: 55, female: 45 },
+      { height: 155, male: 58, female: 46 },
+      { height: 157, male: 60, female: 48 },
+      { height: 160, male: 63, female: 51 },
+      { height: 162, male: 70, female: 54 },
+      { height: 165, male: 75, female: 58 },
+      { height: 167, male: 78, female: 62 },
+      { height: 170, male: 82, female: 68 },
+      { height: 172, male: 87, female: 72 },
+      { height: 175, male: 89, female: 78 },
+      { height: 177, male: 92, female: 82 },
+      { height: 180, male: 95, female: 85 }
+    ];
     const primaryxAxis = {
         title: 'Height (cm)', minimum: 130, maximum: 180,
         edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

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

@@ -5,10 +5,31 @@ import * as ReactDOM from "react-dom";
 import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
          Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
 from'@syncfusion/ej2-react-charts';
-import { scatterData } from 'datasource.ts';
 
 function App() {
-
+  const scatterData: any[] = [
+    { height: 130, male: 35, female: 32 },
+    { height: 132, male: 38, female: 33 },
+    { height: 135, male: 41, female: 38 },
+    { height: 137, male: 43, female: 40 },
+    { height: 140, male: 45, female: 42 },
+    { height: 142, male: 46, female: 42.5 },
+    { height: 145, male: 48, female: 43 },
+    { height: 147, male: 50, female: 44 },
+    { height: 150, male: 52, female: 45 },
+    { height: 152, male: 55, female: 45 },
+    { height: 155, male: 58, female: 46 },
+    { height: 157, male: 60, female: 48 },
+    { height: 160, male: 63, female: 51 },
+    { height: 162, male: 70, female: 54 },
+    { height: 165, male: 75, female: 58 },
+    { height: 167, male: 78, female: 62 },
+    { height: 170, male: 82, female: 68 },
+    { height: 172, male: 87, female: 72 },
+    { height: 175, male: 89, female: 78 },
+    { height: 177, male: 92, female: 82 },
+    { height: 180, male: 95, female: 85 }
+  ];
   const primaryxAxis: AxisModel = {
     title: 'Height (cm)', minimum: 130, maximum: 180,
     edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

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

@@ -3,8 +3,30 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
-import { scatterData } from 'datasource.ts';
 function App() {
+    const scatterData = [
+      { height: 130, male: 35, female: 32 },
+      { height: 132, male: 38, female: 33 },
+      { height: 135, male: 41, female: 38 },
+      { height: 137, male: 43, female: 40 },
+      { height: 140, male: 45, female: 42 },
+      { height: 142, male: 46, female: 42.5 },
+      { height: 145, male: 48, female: 43 },
+      { height: 147, male: 50, female: 44 },
+      { height: 150, male: 52, female: 45 },
+      { height: 152, male: 55, female: 45 },
+      { height: 155, male: 58, female: 46 },
+      { height: 157, male: 60, female: 48 },
+      { height: 160, male: 63, female: 51 },
+      { height: 162, male: 70, female: 54 },
+      { height: 165, male: 75, female: 58 },
+      { height: 167, male: 78, female: 62 },
+      { height: 170, male: 82, female: 68 },
+      { height: 172, male: 87, female: 72 },
+      { height: 175, male: 89, female: 78 },
+      { height: 177, male: 92, female: 82 },
+      { height: 180, male: 95, female: 85 }
+    ];
     const primaryxAxis = {
         title: 'Height (cm)', minimum: 130, maximum: 180,
         edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

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

@@ -5,10 +5,31 @@ import * as ReactDOM from "react-dom";
 import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
          Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
 from'@syncfusion/ej2-react-charts';
-import { scatterData } from 'datasource.ts';
 
 function App() {
-
+  const scatterData: any[] = [
+    { height: 130, male: 35, female: 32 },
+    { height: 132, male: 38, female: 33 },
+    { height: 135, male: 41, female: 38 },
+    { height: 137, male: 43, female: 40 },
+    { height: 140, male: 45, female: 42 },
+    { height: 142, male: 46, female: 42.5 },
+    { height: 145, male: 48, female: 43 },
+    { height: 147, male: 50, female: 44 },
+    { height: 150, male: 52, female: 45 },
+    { height: 152, male: 55, female: 45 },
+    { height: 155, male: 58, female: 46 },
+    { height: 157, male: 60, female: 48 },
+    { height: 160, male: 63, female: 51 },
+    { height: 162, male: 70, female: 54 },
+    { height: 165, male: 75, female: 58 },
+    { height: 167, male: 78, female: 62 },
+    { height: 170, male: 82, female: 68 },
+    { height: 172, male: 87, female: 72 },
+    { height: 175, male: 89, female: 78 },
+    { height: 177, male: 92, female: 82 },
+    { height: 180, male: 95, female: 85 }
+  ];
   const primaryxAxis: AxisModel = {
     title: 'Height (cm)', minimum: 130, maximum: 180,
     edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'

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

@@ -0,0 +1,25 @@
+import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
+import * as React from 'react';
+import { data } from './datasource';
+import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
+
+function App() {
+  const progressbarTemplate = ((props) => {
+    return (
+      <div>
+        <ProgressBarComponent id={props.OrderID} type='Linear' height='60'
+          value={props.Freight} trackThickness={24} progressThickness='20'></ProgressBarComponent>
+      </div>
+    )
+  })
+  return (
+    <div>
+       <GridComponent dataSource={data} height={315} enableHover={false}>
+        <ColumnsDirective>
+          <ColumnDirective field='OrderID' headerText='Order ID' width='100' />
+          <ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
+          <ColumnDirective field='Freight' headerText='Freight' width='120' template={progressbarTemplate}/>
+        </ColumnsDirective>
+      </GridComponent></div>)
+}
+export default App;

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

@@ -0,0 +1,25 @@
+import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
+import * as React from 'react';
+import { data } from './datasource';
+import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
+
+function App() {
+  const progressbarTemplate = ((props: any) => {
+    return (
+      <div>
+        <ProgressBarComponent id={props.OrderID} type='Linear' height='60'
+          value={props.Freight} trackThickness={24} progressThickness='20'></ProgressBarComponent>
+      </div>
+    )
+  })
+  return (
+    <div>
+      <GridComponent dataSource={data} height={315} enableHover={false}>
+        <ColumnsDirective>
+          <ColumnDirective field='OrderID' headerText='Order ID' width='100' />
+          <ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
+          <ColumnDirective field='Freight' headerText='Freight' width='120' template={progressbarTemplate}/>
+        </ColumnsDirective>
+      </GridComponent></div>)
+}
+export default App;