fix(comp:tabs): adaptive width when title changes

fix IDuxFE#1163
liuzaijiang · Sep 30, 2022 · 02c5943 · 02c5943
1 parent 648f832
commit 02c5943
Show file tree

Hide file tree

Showing 8 changed files with 254 additions and 143 deletions.
diff --git a/packages/components/tabs/demo/Card.vue b/packages/components/tabs/demo/Card.vue
@@ -1,8 +1,8 @@
 <template>
   <IxTabs v-model:selectedKey="selectedKey">
-    <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab>
-    <IxTab key="tab2" title="Tab 2"> Content of Tab 2 </IxTab>
-    <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab>
+    <IxTab key="tab1" title="标签1" />
+    <IxTab key="tab2" title="标签2" />
+    <IxTab key="tab3" title="标签3" />
   </IxTabs>
 </template>
 

diff --git a/packages/components/tabs/demo/Line.vue b/packages/components/tabs/demo/Line.vue
@@ -1,8 +1,8 @@
 <template>
   <IxTabs v-model:selectedKey="selectedKey" type="line">
-    <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab>
-    <IxTab key="tab2" title="Tab 2"> Content of Tab 2 </IxTab>
-    <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab>
+    <IxTab key="tab1" title="标签1" />
+    <IxTab key="tab2" title="标签2" />
+    <IxTab key="tab3" title="标签3" />
   </IxTabs>
 </template>
 

diff --git a/packages/components/tabs/demo/Scroll.vue b/packages/components/tabs/demo/Scroll.vue
@@ -1,24 +1,35 @@
 <template>
   <IxSpace vertical :size="40" block>
-    <IxTabs v-model:selectedKey="selectedKey">
-      <IxTab v-for="panel in panels" :key="'tab' + panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
+    <IxTabs v-model:selectedKey="selectedKey" style="width: 410px">
+      <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
     </IxTabs>
-    <IxTabs v-model:selectedKey="selectedKey" type="line">
-      <IxTab v-for="panel in panels" :key="'tab' + panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
+    <IxTabs v-model:selectedKey="selectedKey" style="width: 410px" type="line">
+      <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
     </IxTabs>
-    <IxTabs v-model:selectedKey="selectedKey" type="line" placement="start" style="height: 200px">
-      <IxTab v-for="panel in panels" :key="'tab' + panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
+    <IxTabs v-model:selectedKey="selectedKey" style="height: 200px" type="line" placement="start">
+      <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
     </IxTabs>
-    <IxTabs v-model:selectedKey="selectedKey" type="segment">
-      <IxTab v-for="panel in panels" :key="'tab' + panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
+    <IxTabs v-model:selectedKey="selectedKey" style="width: 410px" type="segment">
+      <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab>
     </IxTabs>
+    <IxSpace align="center">
+      <IxButton @click="onOpen">addTab</IxButton>
+      <IxButton @click="closeTab">closeTab</IxButton>
+      移动到第几个：<IxInputNumber v-model:value="selectedKey" :max="20" :min="1"></IxInputNumber>
+    </IxSpace>
   </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const selectedKey = ref('tab6')
+const selectedKey = ref(1)
 
-const panels = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])
+const panels = ref([1, 2, 3])
+const onOpen = () => {
+  panels.value.push((panels.value[panels.value.length - 1] || 0) + 1)
+}
+const closeTab = () => {
+  panels.value.pop()
+}
 </script>