Skip to content

Commit 5ace16c

Browse files
SubathraKaliamoorthySubathraKaliamoorthy
authored
Merge branch 'hotfix/hotfix-v26.1.35' into BLAZ-885233-BlazorShowcase
2 parents 8cf00aa + 6318172 commit 5ace16c

File tree

5 files changed

+74
-1
lines changed

5 files changed

+74
-1
lines changed

‎blazor-toc.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1049,6 +1049,13 @@
10491049
<li><a href="/blazor/carousel/navigators-and-indicators">Navigators and Indicators</a></li>
10501050
<li><a href="/blazor/carousel/accessibility">Accessibility</a></li>
10511051
<li><a href="/blazor/carousel/styles-and-appearance">Styles and Appearances</a></li>
1052+
<li>How To
1053+
<ul>
1054+
<li>
1055+
<a href="/blazor/carousel/how-to/load-images-in-webp-format">Load images in webp format</a>
1056+
</li>
1057+
</ul>
1058+
</li>
10521059
<li><a href="/cr/blazor/Syncfusion.Blazor.Navigations.SfCarousel.html">API Reference</a></li>
10531060
</ul>
10541061
</li>

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
layout: post
3+
title: Load webp format image with Blazor Carousel Component | Syncfusion
4+
description: Checkout and learn about how to load webp format image with Blazor Carousel component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: Carousel
7+
documentation: ug
8+
---
9+
10+
# Load webp format image with Blazor Carousel Component
11+
12+
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.
13+
14+
```cshtml
15+
@using Syncfusion.Blazor.Navigations
16+
17+
<div class="control-container">
18+
<SfCarousel SwipeMode="CarouselSwipeMode.Mouse & CarouselSwipeMode.Touch">
19+
<CarouselItem>
20+
<figure class="img-container">
21+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
22+
<figcaption class="img-caption">Majestic Valley View</figcaption>
23+
</figure>
24+
</CarouselItem>
25+
<CarouselItem>
26+
<figure class="img-container">
27+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
28+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
29+
</figure>
30+
</CarouselItem>
31+
<CarouselItem>
32+
<figure class="img-container">
33+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
34+
<figcaption class="img-caption">Snowy Stroll</figcaption>
35+
</figure>
36+
</CarouselItem>
37+
</SfCarousel>
38+
</div>
39+
40+
<style>
41+
.control-container {
42+
height: 300px;
43+
margin: 0 auto;
44+
width: 500px;
45+
}
46+
47+
.img-container {
48+
height: 100%;
49+
margin: 0;
50+
}
51+
52+
.img-caption {
53+
color: #fff;
54+
font-size: 1rem;
55+
position: absolute;
56+
bottom: 3rem;
57+
width: 100%;
58+
text-align: center;
59+
}
60+
61+
</style>
62+
```

‎blazor/pivot-table/calculated-field.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Calculated field can also be included in the pivot table through code behind usi
1616
* [Formula](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html#Syncfusion_Blazor_PivotView_PivotViewCalculatedFieldSetting_Formula): It allows to set the formula.
1717
* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FormatSettings.html#Syncfusion_Blazor_PivotView_FormatSettings_Format): It helps to set the number format for the resultant value.
1818

19-
N> The calculated field is applicable only for value fields. Also, the calculated field created through the code behind will be automatically listed in the UI dialog as well.
19+
N> The calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`PivotViewValues`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below.
2020

2121
```cshtml
2222
@using Syncfusion.Blazor.PivotView

‎blazor/pivot-table/getting-started-webapp.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -446,6 +446,8 @@ The filter axis contains collection of fields that would act as master filter ov
446446

447447
The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [PivotViewCalculatedFieldSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property to **true** in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. To know more about calculated field, [refer](./calculated-field) here.
448448

449+
> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`PivotViewValues`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
450+
449451
{% tabs %}
450452
{% highlight razor %}
451453

‎blazor/pivot-table/getting-started.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,6 +467,8 @@ The filter axis contains collection of fields that would act as master filter ov
467467

468468
The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [PivotViewCalculatedFieldSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property to **true** in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. To know more about calculated field, [refer](./calculated-field) here.
469469

470+
> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`PivotViewValues`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
471+
470472
{% tabs %}
471473
{% highlight razor %}
472474

0 commit comments

Comments
 (0)