fix: tab skeleton dom

carbon-design-system · Apr 12, 2022 · a1ff113 · a1ff113
1 parent 5425648
commit a1ff113
Showing 1 changed file with 7 additions and 19 deletions.
diff --git a/packages/core/src/components/cv-tabs/cv-tabs-skeleton.vue b/packages/core/src/components/cv-tabs/cv-tabs-skeleton.vue
@@ -1,23 +1,8 @@
 <template>
-  <div :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton`">
-    <div :class="`${carbonPrefix}--tabs-trigger`">
-      <div :class="`${carbonPrefix}--tabs-trigger-text`">&nbsp;</div>
-      <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z" />
-      </svg>
-    </div>
-    <ul :class="`${carbonPrefix}--tabs__nav ${carbonPrefix}--tabs__nav--hidden`">
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item ${carbonPrefix}--tabs__nav-item--selected`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
+  <div :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton ${carbonPrefix}--tabs--scrollable`">
+    <ul :class="`${carbonPrefix}--tabs--scrollable__nav`">
+      <li v-for="index in tabCount" :key="index" :class="`${carbonPrefix}--tabs--scrollable__nav-item`">
+        <div :class="`${carbonPrefix}--tabs__nav-link`"><span></span></div>
       </li>
     </ul>
   </div>
@@ -28,5 +13,8 @@ import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvTabsSkeleton',
   mixins: [carbonPrefixMixin],
+  props: {
+    tabCount: { type: Number, default: 5 },
+  },
 };
 </script>