diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html index 946e1992f..1aa09954f 100644 --- a/ej2-vue-toc.html +++ b/ej2-vue-toc.html @@ -365,6 +365,11 @@
  • Animations and Transitions
  • Accessibility
  • Styles and Appearances
    • +
  • How To + +
  • API Reference
  • diff --git a/ej2-vue/carousel/how-to/load-images-in-webp-format.md b/ej2-vue/carousel/how-to/load-images-in-webp-format.md new file mode 100644 index 000000000..75d940360 --- /dev/null +++ b/ej2-vue/carousel/how-to/load-images-in-webp-format.md @@ -0,0 +1,24 @@ +--- +layout: post +title: Load webp format image in Vue Carousel component | Syncfusion +description: Learn here all about how to load webp format image in Syncfusion Vue Carousel component of Syncfusion Essential JS 2 and more. +control: Load images in webp format +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Load webp format image in Vue 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 html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/carousel/how-to/default-webp/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/carousel/how-to/default-webp/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/carousel/how-to/default-webp" %} \ No newline at end of file diff --git a/ej2-vue/circular-chart-3d/getting-started.md b/ej2-vue/circular-chart-3d/getting-started.md index 8ae52d318..8b2cdf0fb 100644 --- a/ej2-vue/circular-chart-3d/getting-started.md +++ b/ej2-vue/circular-chart-3d/getting-started.md @@ -12,6 +12,10 @@ domainurl: ##DomainURL## 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. +To get start quickly with Vue 3D Circular Charts, you can check on this video: + +{% youtube "https://www.youtube.com/watch?v=hGpINPEOi1E" %} + ## Prerequisites [System requirements for Syncfusion Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/) diff --git a/ej2-vue/code-snippet/carousel/how-to/default-webp/app-composition.vue b/ej2-vue/code-snippet/carousel/how-to/default-webp/app-composition.vue new file mode 100644 index 000000000..01a73476b --- /dev/null +++ b/ej2-vue/code-snippet/carousel/how-to/default-webp/app-composition.vue @@ -0,0 +1,61 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/carousel/how-to/default-webp/app.vue b/ej2-vue/code-snippet/carousel/how-to/default-webp/app.vue new file mode 100644 index 000000000..b22536e1a --- /dev/null +++ b/ej2-vue/code-snippet/carousel/how-to/default-webp/app.vue @@ -0,0 +1,69 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/carousel/how-to/default-webp/index.css b/ej2-vue/code-snippet/carousel/how-to/default-webp/index.css new file mode 100644 index 000000000..9cec2d129 --- /dev/null +++ b/ej2-vue/code-snippet/carousel/how-to/default-webp/index.css @@ -0,0 +1,24 @@ + + + + + + .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; + } diff --git a/ej2-vue/code-snippet/carousel/how-to/default-webp/index.html b/ej2-vue/code-snippet/carousel/how-to/default-webp/index.html new file mode 100644 index 000000000..e475de850 --- /dev/null +++ b/ej2-vue/code-snippet/carousel/how-to/default-webp/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + + diff --git a/ej2-vue/code-snippet/carousel/how-to/default-webp/index.js b/ej2-vue/code-snippet/carousel/how-to/default-webp/index.js new file mode 100644 index 000000000..2519dea15 --- /dev/null +++ b/ej2-vue/code-snippet/carousel/how-to/default-webp/index.js @@ -0,0 +1,40 @@ + +import Vue from "vue"; +import { CarouselPlugin } from "@syncfusion/ej2-vue-navigations"; + +Vue.use(CarouselPlugin); + +; +new Vue({ + el: '#app', + template: ` +
    + + + + + + + + + + +
    +`, + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/carousel/how-to/default-webp/systemjs.config.js b/ej2-vue/code-snippet/carousel/how-to/default-webp/systemjs.config.js new file mode 100644 index 000000000..96adb0289 --- /dev/null +++ b/ej2-vue/code-snippet/carousel/how-to/default-webp/systemjs.config.js @@ -0,0 +1,32 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/22.2.5/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/schedule/localization.md b/ej2-vue/schedule/localization.md index 25a9f6b20..c67bb22db 100644 --- a/ej2-vue/schedule/localization.md +++ b/ej2-vue/schedule/localization.md @@ -125,6 +125,7 @@ L10n.load({ "week": "Week", "workWeek": "Work Week", "month": "Month", + "year": "Year", "agenda": "Agenda", "weekAgenda": "Week Agenda", "workWeekAgenda": "Work Week Agenda", @@ -151,6 +152,7 @@ L10n.load({ "subject": "Subject", "addTitle": "Add title", "moreDetails": "More Details", + "moreEvents": "More Events", "save": "Save", "editContent": "Do you want to edit only this event or entire series?", "deleteRecurrenceContent": "Do you want to delete only this event or entire series?", @@ -173,12 +175,16 @@ L10n.load({ "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.", "recurrenceDateValidation": "Some months have fewer than the selected date. For these months, the occurrence will fall on the last date of the month.", "sameDayAlert": "Two occurrences of the same event cannot occur on the same day.", + "occurenceAlert": "Cannot reschedule an occurrence of the recurring appointment if it skips over a later occurrence of the same appointment.", "editRecurrence": "Edit Recurrence", "repeats": "Repeats", "alert": "Alert", "startEndError": "The selected end date occurs before the start date.", "invalidDateError": "The entered date value is invalid.", + "blockAlert": "Events cannot be scheduled within the blocked time range.", "ok": "Ok", + "yes": "Yes", + "no": "No", "occurrence": "Occurrence", "series": "Series", "previous": "Previous", @@ -188,7 +194,15 @@ L10n.load({ "timelineWorkWeek": "Timeline Work Week", "timelineMonth": "Timeline Month", "expandAllDaySection": "Expand", - "collapseAllDaySection": "Collapse" + "collapseAllDaySection": "Collapse", + "timelineYear": "Timeline Year", + "editFollowingEvent": "Following Events", + "deleteTitle": "Delete Event", + "editTitle": "Edit Event", + "beginFrom": "Begin From", + "endAt": "End At", + "searchTimezone": "Search Timezone", + "noRecords": "No records found", }, "recurrenceeditor": { "none": "None",