<template>

  <div class="tab" v-show="active">
    <slot>
        {{content}}
    </slot>  
  </div>
  
</template>

<script>
export default {
    name: "sui-tab",
  

  props: {
    active:{
      type: Boolean,
      default: false
    },
    content: {
      type: Array,
      default: () => []    },
    
    
  },
  
};
</script>

<style lang="css" scoped>
.tab-fade-enter-active, .tab-fade-leave-active {
  transition: opacity .3s ease;
}
.tab-fade-enter, .tab-fade-leave-to
/* .tab-fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

</style>
