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 时，页签内容不再渲染，并且 position 将被设置为固定值 top',
+            'en-US': 'When header-only is true, the tab content will no longer be rendered, and the position will be set to a fixed value of top'
+          },
+          mode: ['pc'],
+          pcDemo: 'header-only',
+          mfDemo: ''
         }
       ],
       events: [

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

@@ -0,0 +1,36 @@
+<template>
+  <tiny-tabs tab-style="card" style="width: 500px" :position="position" header-only>
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
+      {{ item.content }}
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script lang="jsx">
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs,
+    TinyTabItem
+  },
+  data() {
+    return {
+      position: 'left',
+      tabs: [
+        {
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content '
+        },
+        {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }
+      ],
+      tabIndex: 2
+    }
+  }
+}
+</script>

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/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,
@@ -78,7 +79,6 @@ export default defineComponent({
       handleTabDragEnd,
       editable,
       withAdd,
-      position,
       size,
       stretch,
       showMoreTabs,
@@ -89,9 +89,12 @@ export default defineComponent({
       overflowTitle,
       titleWidth,
       panelMaxHeight,
-      panelWidth
+      panelWidth,
+      headerOnly
     } = this
 
+    const position = headerOnly ? 'top' : this.position
+
     const newButton =
       editable || withAdd ? (
         <span
@@ -150,7 +153,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