65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<ul class="MapsTabs">
|
||
|
|
<li class="MapsTabs__item">
|
||
|
|
<button class="button button--ghost MapsTabs__link" :class="{'is-active': cartoMapsVisible}" @click="showCartoMaps">{{ $t('MapsPage.tabs.carto') }}</button>
|
||
|
|
</li>
|
||
|
|
<li class="MapsTabs__item">
|
||
|
|
<button class="button button--ghost MapsTabs__link" :class="{'is-active': keplerMapsVisible}" @click="showKeplerMaps">{{ $t('MapsPage.tabs.external') }}</button>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'MapTabs',
|
||
|
|
props: {
|
||
|
|
cartoMapsVisible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
keplerMapsVisible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showCartoMaps () {
|
||
|
|
this.$emit('showCartoMaps');
|
||
|
|
},
|
||
|
|
showKeplerMaps () {
|
||
|
|
this.$emit('showKeplerMaps');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'new-dashboard/styles/variables';
|
||
|
|
|
||
|
|
.MapsTabs {
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 26px;
|
||
|
|
border-bottom: 1px solid $neutral--300;
|
||
|
|
|
||
|
|
&__item {
|
||
|
|
position: relative;
|
||
|
|
margin-right: 16px;
|
||
|
|
padding: 0 16px;
|
||
|
|
transform: translate3d(0, 1px, 0);
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__link {
|
||
|
|
padding: 24px 0 20px;
|
||
|
|
border-bottom: 4px solid transparent;
|
||
|
|
border-radius: 0;
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
border-color: currentColor;
|
||
|
|
color: $text__color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|