Skip to content

Commit a87f57a

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-19-2024 4:30:25 AM
1 parent 274f8aa commit a87f57a

File tree

10 files changed

+297
-1
lines changed

10 files changed

+297
-1
lines changed

‎ej2-vue-toc.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,11 @@
365365
<li><a href="/ej2-vue/carousel/animations-and-transitions">Animations and Transitions</a></li>
366366
<li><a href="/ej2-vue/carousel/accessibility">Accessibility</a></li>
367367
<li><a href="/ej2-vue/carousel/styles-and-appearance">Styles and Appearances</a></li>
368+
<li>How To
369+
<ul>
370+
<li><a href="/ej2-vue/carousel/how-to/load-images-in-webp-format.md">Load images in webp format</a></li>
371+
</ul>
372+
</li>
368373
<li><a href="https://ej2.syncfusion.com/vue/documentation/api/carousel">API Reference</a></li>
369374
</ul>
370375
</li><li>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
layout: post
3+
title: Load webp format image in Vue Carousel component | Syncfusion
4+
description: Learn here all about how to load webp format image in Syncfusion Vue Carousel component of Syncfusion Essential JS 2 and more.
5+
control: Load images in webp format
6+
platform: ej2-vue
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load webp format image in Vue 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 html tabtitle="Composition API (~/src/App.vue)" %}
17+
{% include code-snippet/carousel/how-to/default-webp/app-composition.vue %}
18+
{% endhighlight %}
19+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
20+
{% include code-snippet/carousel/how-to/default-webp/app.vue %}
21+
{% endhighlight %}
22+
{% endtabs %}
23+
24+
{% previewsample "page.domainurl/code-snippet/carousel/how-to/default-webp" %}

‎ej2-vue/circular-chart-3d/getting-started.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ domainurl: ##DomainURL##
1212

1313
This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion Vue 3D Circular Chart component.
1414

15+
To get start quickly with Vue 3D Circular Charts, you can check on this video:
16+
17+
{% youtube "https://www.youtube.com/watch?v=hGpINPEOi1E" %}
18+
1519
## Prerequisites
1620

1721
[System requirements for Syncfusion Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/)

‎ej2-vue/code-snippet/carousel/how-to/default-webp/app-composition.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="control-container">
3+
<ejs-carousel animationEffect='Fade'>
4+
<e-carousel-items>
5+
<e-carousel-item template="Cardinal"></e-carousel-item>
6+
<template v-slot:Cardinal>
7+
<figure class="img-container">
8+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
9+
<figcaption class="img-caption">Majestic Valley View</figcaption>
10+
</figure>
11+
</template>
12+
<e-carousel-item template="kingfisher"></e-carousel-item>
13+
<template v-slot:kingfisher>
14+
<figure class="img-container">
15+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
16+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
17+
</figure>
18+
</template>
19+
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
20+
<template v-slot:keel-billed-toucan>
21+
<figure class="img-container">
22+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
23+
<figcaption class="img-caption">Snowy Stroll</figcaption>
24+
</figure>
25+
</template>
26+
</e-carousel-items>
27+
</ejs-carousel>
28+
</div>
29+
</template>
30+
31+
<script setup>
32+
33+
import { CarouselComponent as EjsCarousel, CarouselItemsDirective as ECarouselItems, CarouselItemDirective as ECarouselItem } from '@syncfusion/ej2-vue-navigations';
34+
35+
</script>
36+
37+
<style>
38+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
39+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
40+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
41+
42+
.control-container {
43+
height: 360px;
44+
margin: 0 auto;
45+
width: 600px;
46+
}
47+
48+
.img-container {
49+
height: 100%;
50+
margin: 0;
51+
}
52+
53+
.img-caption {
54+
color: #fff;
55+
font-size: 1rem;
56+
position: absolute;
57+
bottom: 3rem;
58+
width: 100%;
59+
text-align: center;
60+
}
61+
</style>

‎ej2-vue/code-snippet/carousel/how-to/default-webp/app.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<div class="control-container">
3+
<ejs-carousel animationEffect='Fade'>
4+
<e-carousel-items>
5+
<e-carousel-item template="Cardinal"></e-carousel-item>
6+
<template v-slot:Cardinal>
7+
<figure class="img-container">
8+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
9+
<figcaption class="img-caption">Majestic Valley View</figcaption>
10+
</figure>
11+
</template>
12+
<e-carousel-item template="kingfisher"></e-carousel-item>
13+
<template v-slot:kingfisher>
14+
<figure class="img-container">
15+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
16+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
17+
</figure>
18+
</template>
19+
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
20+
<template v-slot:keel-billed-toucan>
21+
<figure class="img-container">
22+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
23+
<figcaption class="img-caption">Snowy Stroll</figcaption>
24+
</figure>
25+
</template>
26+
</e-carousel-items>
27+
</ejs-carousel>
28+
</div>
29+
</template>
30+
31+
<script>
32+
33+
import { CarouselComponent, CarouselItemDirective, CarouselItemsDirective } from "@syncfusion/ej2-vue-navigations";
34+
35+
export default {
36+
name: "App",
37+
components: {
38+
"ejs-carousel": CarouselComponent,
39+
"e-carousel-items": CarouselItemsDirective,
40+
"e-carousel-item": CarouselItemDirective
41+
}
42+
};
43+
</script>
44+
45+
<style>
46+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
47+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
48+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
49+
50+
.control-container {
51+
height: 360px;
52+
margin: 0 auto;
53+
width: 600px;
54+
}
55+
56+
.img-container {
57+
height: 100%;
58+
margin: 0;
59+
}
60+
61+
.img-caption {
62+
color: #fff;
63+
font-size: 1rem;
64+
position: absolute;
65+
bottom: 3rem;
66+
width: 100%;
67+
text-align: center;
68+
}
69+
</style>

‎ej2-vue/code-snippet/carousel/how-to/default-webp/index.css

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

‎ej2-vue/code-snippet/carousel/how-to/default-webp/index.html

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

‎ej2-vue/code-snippet/carousel/how-to/default-webp/index.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
import Vue from "vue";
3+
import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations";
4+
5+
Vue.use(CarouselPlugin);
6+
7+
;
8+
new Vue({
9+
el: '#app',
10+
template: `
11+
<div class="control-container">
12+
<ejs-carousel animationEffect="Fade">
13+
<e-carousel-items>
14+
<e-carousel-item template="Cardinal"></e-carousel-item>
15+
<template v-slot:Cardinal>
16+
<figure class="img-container">
17+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
18+
<figcaption class="img-caption">Majestic Valley View</figcaption>
19+
</figure>
20+
</template>
21+
<e-carousel-item template="kingfisher"></e-carousel-item>
22+
<template v-slot:kingfisher>
23+
<figure class="img-container">
24+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
25+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
26+
</figure>
27+
</template>
28+
<e-carousel-item template="keel-billed-toucan"></e-carousel-item>
29+
<template v-slot:keel-billed-toucan>
30+
<figure class="img-container">
31+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
32+
<figcaption class="img-caption">Snowy Stroll</figcaption>
33+
</figure>
34+
</template>
35+
</e-carousel-items>
36+
</ejs-carousel>
37+
</div>
38+
`,
39+
40+
});

‎ej2-vue/code-snippet/carousel/how-to/default-webp/systemjs.config.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/22.2.5/"
14+
},
15+
map: {
16+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
17+
vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
20+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
21+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
22+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
23+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
24+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
25+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
26+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
27+
"@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
28+
"@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
29+
}
30+
});
31+
32+
System.import('index.js');

‎ej2-vue/schedule/localization.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ L10n.load({
125125
"week": "Week",
126126
"workWeek": "Work Week",
127127
"month": "Month",
128+
"year": "Year",
128129
"agenda": "Agenda",
129130
"weekAgenda": "Week Agenda",
130131
"workWeekAgenda": "Work Week Agenda",
@@ -151,6 +152,7 @@ L10n.load({
151152
"subject": "Subject",
152153
"addTitle": "Add title",
153154
"moreDetails": "More Details",
155+
"moreEvents": "More Events",
154156
"save": "Save",
155157
"editContent": "Do you want to edit only this event or entire series?",
156158
"deleteRecurrenceContent": "Do you want to delete only this event or entire series?",
@@ -173,12 +175,16 @@ L10n.load({
173175
"createError": "The duration of the event must be shorter than how frequently it occurs. Shorten the duration, or change the recurrence pattern in the recurrence event editor.",
174176
"recurrenceDateValidation": "Some months have fewer than the selected date. For these months, the occurrence will fall on the last date of the month.",
175177
"sameDayAlert": "Two occurrences of the same event cannot occur on the same day.",
178+
"occurenceAlert": "Cannot reschedule an occurrence of the recurring appointment if it skips over a later occurrence of the same appointment.",
176179
"editRecurrence": "Edit Recurrence",
177180
"repeats": "Repeats",
178181
"alert": "Alert",
179182
"startEndError": "The selected end date occurs before the start date.",
180183
"invalidDateError": "The entered date value is invalid.",
184+
"blockAlert": "Events cannot be scheduled within the blocked time range.",
181185
"ok": "Ok",
186+
"yes": "Yes",
187+
"no": "No",
182188
"occurrence": "Occurrence",
183189
"series": "Series",
184190
"previous": "Previous",
@@ -188,7 +194,15 @@ L10n.load({
188194
"timelineWorkWeek": "Timeline Work Week",
189195
"timelineMonth": "Timeline Month",
190196
"expandAllDaySection": "Expand",
191-
"collapseAllDaySection": "Collapse"
197+
"collapseAllDaySection": "Collapse",
198+
"timelineYear": "Timeline Year",
199+
"editFollowingEvent": "Following Events",
200+
"deleteTitle": "Delete Event",
201+
"editTitle": "Edit Event",
202+
"beginFrom": "Begin From",
203+
"endAt": "End At",
204+
"searchTimezone": "Search Timezone",
205+
"noRecords": "No records found",
192206
},
193207
"recurrenceeditor": {
194208
"none": "None",

0 commit comments

Comments
 (0)