diff options
Diffstat (limited to 'src/views/_sila/Power/Static/SupplyTabs.vue')
-rw-r--r-- | src/views/_sila/Power/Static/SupplyTabs.vue | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/src/views/_sila/Power/Static/SupplyTabs.vue b/src/views/_sila/Power/Static/SupplyTabs.vue new file mode 100644 index 00000000..7a1ea20d --- /dev/null +++ b/src/views/_sila/Power/Static/SupplyTabs.vue @@ -0,0 +1,70 @@ +<template> + <b-col + ref="content" + class="d-flex align-items-center data-tab" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + :class="{ 'tab-active': currentSlot === item.id }" + @click="switchTab(item.id)" + >{{ item.id }}</span + > + </b-col> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentSlot: { + type: String, + default: null, + }, + switchTab: { + type: Function, + required: true, + }, + }, + data() { + return { + container: this.$refs.content, + }; + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.data-tab { + height: 48px; + max-width: 150%; + width: auto; + margin: -2rem -1.95rem 0px -2rem; + padding-left: 2rem; + overflow-x: auto; + @include media-breakpoint-down(md) { + padding-left: 1rem; + padding-right: 1rem; + margin-left: -0.95rem; + } + border-bottom: 1px solid $gray-10; + gap: 24px; +} + +.tab-active { + color: $primary; + transition: ease-in 0.15s; +} +</style> |