feat(tabs): add header-only

examples/sites/demos/apis/tabs.js

@@ -294,6 +294,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'overflow-title',
           mfDemo: ''
+        },
+        {
+          name: 'header-only',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '当 header-only 为 true 时，页签内容不再渲染',
+            'en-US': 'When header-only is true, the tab content is no longer rendered'
+          },
+          mode: ['pc'],
+          pcDemo: 'header-only',
+          mfDemo: ''
         }
       ],
       events: [

examples/sites/demos/pc/app/tabs/header-only.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tab-demo-position">
+    <tiny-radio-group v-model="position" class="mb10">
+      <tiny-radio-button label="top">top 显示</tiny-radio-button>
+      <tiny-radio-button label="bottom">bottom 显示</tiny-radio-button>
+      <tiny-radio-button label="left">left 显示</tiny-radio-button>
+      <tiny-radio-button label="right">right 显示</tiny-radio-button>
+    </tiny-radio-group>
+    <tiny-tabs v-model="activeName4" tab-style="card" :position="position" header-only>
+      <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
+        {{ item.content }}
+      </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
+
+const activeName4 = ref('navigation1')
+const position = ref('left')
+const tabs3 = ref([
+  {
+    name: 'navigation1',
+    title: 'Navigation 1',
+    content: 'Navigation 1'
+  },
+  {
+    name: 'navigation2',
+    title: 'Navigation 2',
+    content: 'Navigation 2'
+  },
+  {
+    name: 'navigation3',
+    title: 'Navigation 3',
+    content: 'Navigation 3'
+  },
+  {
+    name: 'navigation4',
+    title: 'Navigation 4',
+    content: 'Navigation 4'
+  },
+  {
+    name: 'navigation5',
+    title: 'Navigation 5',
+    content: 'Navigation 5'
+  }
+])
+</script>
+
+<style scoped>
+.tab-demo-position {
+  min-height: 250px;
+}
+</style>

examples/sites/demos/pc/app/tabs/webdoc/tabs.js

@@ -282,6 +282,18 @@ export default {
           'Use <code>overflow-title</code> to set the title to hide and show when it exceeds a certain length (default 256px)... , move the cursor to the title to display the tooltip, and set <code>title-width</code> to the excess length of the title.'
       },
       codeFiles: ['overflow-title.vue']
+    },
+    {
+      demoId: 'header-only',
+      name: {
+        'zh-CN': '仅展示头部',
+        'en-US': 'Header only'
+      },
+      desc: {
+        'zh-CN': '通过 <code>header-only</code> 仅展示头部。',
+        'en-US': 'Use <code>>header-only</code> header only.'
+      },
+      codeFiles: ['header-only.vue']
     }
   ],
   features: [

packages/renderless/src/tabs/vue.ts

@@ -62,7 +62,8 @@ const initState = ({ reactive, props }: Pick<ITabsRenderlessParams, 'reactive' |
     direction: '',
     expandPanesWidth: '',
     activeIndex: 1,
-    separator: props.separator
+    separator: props.separator,
+    headerOnly: props.headerOnly
   }) as ITabsState
 
 const initWatcher = ({

packages/renderless/types/tabs.type.ts

@@ -33,6 +33,7 @@ export interface ITabsState {
   activeIndex: number
   morePanes?: ITabsPaneVm[]
   separator?: boolean
+  headerOnly?: boolean
 }
 
 /**

packages/theme/src/tabs/index.less

@@ -1317,6 +1317,35 @@
     }
   }
 
+  // 仅渲染头部
+  &&--header-only {
+
+    &:is(.@{tabs-prefix-cls}--left) {
+      width: 120px;
+    }
+
+    &.@{tabs-prefix-cls}--left .@{tabs-prefix-cls}__header {
+      float: none;
+      margin-right: 0;
+      display: block;
+    }
+
+    &:is(.@{tabs-prefix-cls}--right) {
+      width: 120px;
+    }
+
+    &.@{tabs-prefix-cls}--right .@{tabs-prefix-cls}__header {
+      float: none;
+      margin-left: 0;
+      display: block;
+    }
+
+    &.@{tabs-prefix-cls}--bottom .@{tabs-prefix-cls}__header {
+      margin-top: 0;
+    }
+
+  }
+
   // 动效
   .slideInLeft-transition,
   .slideInRight-transition {

packages/vue/src/tab-item/src/pc.vue

@@ -11,7 +11,7 @@
  -->
 <template>
   <div
-    v-if="!lazy || state.loaded || state.active"
+    v-if="!state.rootTabs.headerOnly && (!lazy || state.loaded || state.active)"
     v-show="state.active"
     :aria-hidden="!state.active"
     :id="`pane-${state.paneName}`"

packages/vue/src/tabs/src/index.ts

@@ -69,7 +69,9 @@ export const tabsProps = {
   // tiny 新增
   moreShowAll: Boolean,
   panelMaxHeight: String,
-  panelWidth: String
+  panelWidth: String,
+  // 只渲染头部
+  headerOnly: Boolean
 }
 
 export default defineComponent({

packages/vue/src/tabs/src/pc.vue

@@ -52,7 +52,8 @@ export default defineComponent({
     'titleWidth',
     'moreShowAll',
     'panelMaxHeight',
-    'panelWidth'
+    'panelWidth',
+    'headerOnly'
   ],
   components: {
     TabNav,
@@ -89,7 +90,8 @@ export default defineComponent({
       overflowTitle,
       titleWidth,
       panelMaxHeight,
-      panelWidth
+      panelWidth,
+      headerOnly
     } = this
 
     const newButton =
@@ -150,7 +152,7 @@ export default defineComponent({
       </div>
     )
 
-    const panels = <div class="tiny-tabs__content">{this.slots.default && this.slots.default()}</div>
+    const panels = headerOnly ? this.slots.default?.() : <div class="tiny-tabs__content">{this.slots.default?.()}</div>
 
     return (
       <div
@@ -161,7 +163,8 @@ export default defineComponent({
           'tiny-tabs--border-card': tabStyle === 'border-card',
           'tiny-tabs--button-card': tabStyle === 'button-card',
           'tiny-tabs--small': size === 'small',
-          'tiny-tabs--large': size === 'large'
+          'tiny-tabs--large': size === 'large',
+          'tiny-tabs--header-only': headerOnly
         }}>
         {position !== 'bottom' ? [header, panels] : [panels, header]}
       </div>