button.php
2 years ago
checkbox.php
2 years ago
collapse.php
2 years ago
colorpicker.php
2 years ago
component-wrapper.php
2 years ago
dimensions.php
2 years ago
f-select.php
2 years ago
fselect.php
2 years ago
iconpicker.php
2 years ago
input.php
2 years ago
list-table-heading.php
2 years ago
list-table-item.php
2 years ago
list-table.php
2 years ago
notice.php
2 years ago
pagination.php
2 years ago
popup.php
2 years ago
radio.php
2 years ago
repeater-item.php
2 years ago
repeater.php
2 years ago
select.php
2 years ago
switcher.php
2 years ago
tabs-panel.php
2 years ago
tabs.php
2 years ago
textarea.php
2 years ago
time.php
2 years ago
title.php
2 years ago
wp-media.php
2 years ago
tabs.php
30 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Tabs component |
| 4 | */ |
| 5 | ?> |
| 6 | <div |
| 7 | :class="{ |
| 8 | 'cx-vui-tabs': true, |
| 9 | 'cx-vui-tabs--invert': invert, |
| 10 | 'cx-vui-tabs--layout-vertical': 'vertical' === this.layout, |
| 11 | 'cx-vui-tabs--layout-horizontal': 'horizontal' === this.layout, |
| 12 | 'cx-vui-tabs--in-panel': inPanel, |
| 13 | }" |
| 14 | > |
| 15 | <div class="cx-vui-tabs__nav"> |
| 16 | <div |
| 17 | v-for="item in navList" |
| 18 | :class="{ |
| 19 | 'cx-vui-tabs__nav-item': true, |
| 20 | 'cx-vui-tabs__nav-item--active': isActive( item.name ), |
| 21 | }" |
| 22 | @click="onTabClick( item.name )" |
| 23 | > |
| 24 | {{ item.label }} |
| 25 | </div> |
| 26 | </div> |
| 27 | <div class="cx-vui-tabs__content"> |
| 28 | <slot></slot> |
| 29 | </div> |
| 30 | </div> |