Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <script> import { GlBadge, GlTabs, GlTab } from '@gitlab/ui'; import { initScrollingTabs } from '~/layout_nav'; /** * Given an array of tabs, renders non linked bootstrap tabs. * When a tab is clicked it will trigger an event and provide the clicked scope. * * This component is used in apps that handle the API call. * If you only need to change the URL this component should not be used. * * @example * <navigation-tabs * :tabs="[ * { * name: String, * scope: String, * count: Number || Undefined || Null, * isActive: Boolean, * }, * ]" * @onChangeTab="onChangeTab" * /> */ export default { name: 'NavigationTabs', components: { GlBadge, GlTabs, GlTab, }, props: { tabs: { type: Array, required: true, }, scope: { type: String, required: false, default: '', }, }, mounted() { initScrollingTabs(); }, methods: { shouldRenderBadge(count) { // 0 is valid in a badge, but evaluates to false, we need to check for undefined or null return !(count === undefined || count === null); }, onTabClick(tab) { this.$emit('onChangeTab', tab.scope); }, }, }; </script> <template> <gl-tabs class="gl-display-flex gl-w-full" nav-class="gl-border-0!"> <gl-tab v-for="(tab, i) in tabs" :key="i" :title-link-class="`js-${scope}-tab-${tab.scope} gl-display-inline-flex`" :title-link-attributes="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { 'data-testid': `${scope}-tab-${tab.scope}`, } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" :active="tab.isActive" @click="onTabClick(tab)" > <template #title> <span class="gl-mr-2"> {{ tab.name }} </span> <gl-badge v-if="shouldRenderBadge(tab.count)" size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge> </template> </gl-tab> </gl-tabs> </template> |