Skip to main content

Posts

Showing posts with the label vuejs

Pagination In Vue3 Application Using '@ocrv/vue-tailwind-pagination' Plugin

In this article, we will understand the pagination in the Vue3 application using the '@ocrv/vue-tailwind-pagination' plugin. Key Features Of Plugin: current -  The 'current' property to set the current page number. total - The 'total' property that represents the number of records for the table content. So based on this 'total' property value, the total number of page numbers display depends. per-page - The 'per-page' property to set the count for the records to display for each page. page-changed - The 'page-changed' event that raises on selecting the page. It outputs  '$event' which is nothing but the selected page number. Create A Vue3 Sample Application: To implement our pagination sample let's begin by creating a Vue3 sample application. Command To Create Vue3 Application: Vue Create Your_Sample_App_name Install Tailwind Pagination NPM Package: Tailwind Pagination NPM Package Command: npm install --save @ocrv/vue-ta

360 Degree Image Preview In VueJS Application Using 'vue-360' Plugin

This article, explains about 360-degree image previewer in the vue.js application using the 'vue-360' plugin. Overview  On 'vue-360' Library: Some of the key features of the 'vue-360' library are: amount - total number of image count that is used to display the 360-degree image preview. imagePath -   need to specify the relative path or full domain path without the image name. fileName - need to specify the file name. spinReverse - boolean property used to rotate the images in reverse order. The default value is false. autoplay -  autoplay your images. The default value is '24' images. loop - number of loops you want for autoplay. The default value is '1'. boxShadow-  apply a box-shadow background. The default value is 'false'. buttonClass - apply styling to buttons. The default value is 'light'. paddingIndex - apply leading zero to image index. The default value is 'false'. disableZoom - disabling zoom functionality.