docs: add active prop to header slot

oruga-ui · Dec 2, 2024 · 578cdea · 578cdea
1 parent c2b4f51
commit 578cdea
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/packages/docs/components/Tabs.md b/packages/docs/components/Tabs.md
@@ -106,7 +106,7 @@ sidebarDepth: 2
 | Name    | Description           | Bindings                                |
 | ------- | --------------------- | --------------------------------------- |
 | default | Tab item content      | **active** `boolean` - if item is shown |
-| header  | Override header label |                                         |
+| header  | Override header label | **active** `boolean` - if item is shown |
 
 </div>
 

diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
@@ -196,8 +196,9 @@ const panelClasses = defineClasses(["tabPanelClass", "o-tabs__panel"]);
             <template v-if="false">
                 <!--
                     @slot Override header label
+                    @binding {boolean} active - if item is shown 
                 -->
-                <slot name="header" />
+                <slot name="header" :active="isActive && visible" />
             </template>
         </div>
     </Transition>

diff --git a/packages/oruga/src/components/tabs/Tabs.vue b/packages/oruga/src/components/tabs/Tabs.vue
@@ -332,6 +332,9 @@ const contentClasses = defineClasses(
                     :tag="childItem.tag"
                     name="header"
                     :class="childItem.classes"
+                    :props="{
+                        active: childItem.index === activeIndex,
+                    }"
                     @click="tabClick(childItem)"
                     @keydown.enter="tabClick(childItem)"
                     @keydown.left="prev($event, childItem.index)"