Refactor #3832 Refactor #3833 - For TabView

api-generator/components/tabview.js

@@ -41,6 +41,18 @@ const TabViewProps = [
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
     },
+    {
+        name: 'prevIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Prev icon of the scrollable tabview.'
+    },
+    {
+        name: 'nextIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Next icon of the scrollable tabview.'
+    },
     {
         name: 'pt',
         type: 'any',

components/lib/tabview/TabView.d.ts

@@ -151,6 +151,14 @@ export interface TabViewProps {
      * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Prev icon of the scrollable tabview.
+     */
+    prevIcon?: string | undefined;
+    /**
+     * Next icon of the scrollable tabview.
+     */
+    nextIcon?: string | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {TabViewPassThroughOptions}

components/lib/tabview/TabView.vue

@@ -13,7 +13,7 @@
                 v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
             >
                 <slot name="previcon">
-                    <span class="pi pi-chevron-left" aria-hidden="true" v-bind="ptm('previcon')"></span>
+                    <component :is="prevIcon ? prevIcon : 'ChevronLeftIcon'" v-bind="ptm('previcon')" aria-hidden="true" />
                 </slot>
             </button>
             <div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
@@ -59,7 +59,7 @@
                 v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
             >
                 <slot name="nexticon">
-                    <span class="pi pi-chevron-right" aria-hidden="true" v-bind="ptm('nexticon')"></span>
+                    <component :is="nextIcon ? nextIcon : 'ChevronRightIcon'" v-bind="ptm('nexticon')" aria-hidden="true" />
                 </slot>
             </button>
         </div>
@@ -85,7 +85,8 @@
 import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
-
+import ChevronLeftIcon from 'primevue/icon/chevronleft';
+import ChevronRightIcon from 'primevue/icon/chevronright';
 export default {
     name: 'TabView',
     extends: BaseComponent,
@@ -118,6 +119,14 @@ export default {
         nextButtonProps: {
             type: null,
             default: null
+        },
+        prevIcon: {
+            type: String,
+            default: undefined
+        },
+        nextIcon: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -391,6 +400,10 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        ChevronLeftIcon,
+        ChevronRightIcon
     }
 };
 </script>