StyleSky OB Kullanımı

TAB Component

<tab :value="tabButtons" @input="setActiveIndex">
    <li class="tab-pane fade show active" id="tab-0">
       //id alanına kaç tane tab yapılacaksa tab-0, tab-1, tab-2, tab-n olarak çoğaltılır
    </li>
     <li class="tab-pane fade show" id="tab-1">
       
    </li>
</tab>

<script>
    import Tab from 'stylesky-ob/styland-ui/components/Tab.vue';
    export default {
    components: {
        Tab
      },
     methods: {
        setTabButtons() {
          this.tabButtons = [
            {text: 'Tab ALanı Başlık 1'},
            {text: 'Tab ALanı Başlık 2'}
          ]
        },
        setActiveIndex(activeIndex) {
          this.active = activeIndex;
        },
      }
    }
</script>

MODAL Component

<modal class="large" v-if="modalStatus">
    <div class="mod-header align-between-x align-center-y modal-head" slot="header">
        <div>
            <h5>Header</h5>
        </div>
    </div>
    <div class="mod-body" slot="body">
        Modal Content
    </div>
</modal>

<button type="button" @click="modalStatus=!modalStatus">Open Modal</button>

<script>
    import Modal from 'stylesky-ob/styland-ui/components/Modal.vue';
    export default {
        components: {
            Modal
        },
        data() {
            return {
                modalStatus: false,
            }
        }
    }
</script>