feat(CTabPane): add the transition property to enable control of fade animation on panels

mrholek · mrholek · commit 45a515d55c3b · 2024-05-27T13:44:27.000+02:00
diff --git a/packages/coreui-vue/src/components/tabs/CTabPane.ts b/packages/coreui-vue/src/components/tabs/CTabPane.ts
@@ -5,6 +5,15 @@ import { executeAfterTransition } from '../../utils/transition'
 const CTabPane = defineComponent({
   name: 'CTabPane',
   props: {
+    /**
+     * Enable fade in and fade out transition.
+     *
+     * @since 5.1.0
+     */
+    transition: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Toggle the visibility of component.
      */
@@ -57,9 +66,9 @@ const CTabPane = defineComponent({
               {
                 class: [
                   'tab-pane',
-                  'fade',
                   {
                     active: props.visible,
+                    fade: props.transition,
                     show: firstRender.value && props.visible,
                   },
                 ],
diff --git a/packages/docs/api/tabs/CTabPane.api.md b/packages/docs/api/tabs/CTabPane.api.md
@@ -8,9 +8,10 @@ import CTabPane from '@coreui/vue/src/components/tabs/CTabPane'
 
 #### Props
 
-| Prop name   | Description                         | Type    | Values | Default |
-| ----------- | ----------------------------------- | ------- | ------ | ------- |
-| **visible** | Toggle the visibility of component. | boolean | -      | false   |
+| Prop name                                                     | Description                             | Type    | Values | Default |
+| ------------------------------------------------------------- | --------------------------------------- | ------- | ------ | ------- |
+| **transition** <br><div class="badge bg-primary">5.1.0+</div> | Enable fade in and fade out transition. | boolean | -      | true    |
+| **visible**                                                   | Toggle the visibility of component.     | boolean | -      | false   |
 
 #### Events
 
