|
|
@@ -0,0 +1,64 @@
|
|
|
+<template>
|
|
|
+ <div class="l-flex--row l-flex__none c-status-bar">
|
|
|
+ <div
|
|
|
+ v-for="tab in items"
|
|
|
+ :key="tab.key"
|
|
|
+ class="l-flex__none c-status-bar__item u-pointer"
|
|
|
+ :class="{ active: tab.key === active }"
|
|
|
+ @click="onClick(tab)"
|
|
|
+ >
|
|
|
+ {{ tab.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'Tabs',
|
|
|
+ props: {
|
|
|
+ active: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ items: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onClick (tab) {
|
|
|
+ this.$emit('update:active', tab.key)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.c-status-bar {
|
|
|
+ align-self: flex-start;
|
|
|
+ padding: 4px;
|
|
|
+ margin-bottom: $spacing;
|
|
|
+ border-radius: 2px;
|
|
|
+ background-color: #f4f7fb;
|
|
|
+ overflow-x: auto;
|
|
|
+
|
|
|
+ &__item {
|
|
|
+ padding: 4px 10px;
|
|
|
+ color: $info--dark;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ & + & {
|
|
|
+ margin-left: $spacing;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $blue;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|