<template>
  <div>
    <div class="slide-wrap" v-if="$attrs.showNav !== false">
      <template v-for="(item, index) in navList">
        <div :key="index" v-show="item.visible !== false">
          <a
            href="javascript:void(0)"
            class="slide-nav"
            @click="handleChange(index)"
          >
            <p>{{ item.label }}</p>
          </a>
        </div>
      </template>
    </div>
    <div class="d-cont" :class="{ 'full-width': $attrs.showNav === false }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { baseTabsMixin } from "./mixins.js";

export default {
  name: "baseTabs",
  mixins: [baseTabsMixin],
};
</script>

<style>
div.d-cont.full-width .d-item {
  padding-right: 16px !important;
}
</style>
