mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
987 B
57 lines
987 B
1 year ago
|
<script lang="ts" setup>
|
||
|
const props = defineProps<{
|
||
|
modelValue: string
|
||
|
centered?: boolean
|
||
|
}>()
|
||
|
|
||
|
const emits = defineEmits<{
|
||
|
(event: 'update:modelValue', data: string): void
|
||
|
}>()
|
||
|
|
||
|
const vModel = useVModel(props, 'modelValue', emits)
|
||
|
</script>
|
||
|
|
||
|
<template>
|
||
|
<a-tabs
|
||
|
v-model:activeKey="vModel"
|
||
|
class="nc-tabs"
|
||
|
:class="{
|
||
|
centered: props.centered,
|
||
|
}"
|
||
|
>
|
||
|
<slot />
|
||
|
</a-tabs>
|
||
|
</template>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.nc-tabs.centered {
|
||
|
> .ant-tabs-nav {
|
||
|
@apply justify-center mb-0;
|
||
|
|
||
|
.ant-tabs-nav-wrap {
|
||
|
@apply w-full flex flex-row justify-center;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.nc-tabs {
|
||
|
.ant-tabs-tab {
|
||
|
@apply px-2 text-gray-600 !hover:text-gray-800;
|
||
|
}
|
||
|
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||
|
@apply text-brand-500;
|
||
|
}
|
||
|
.ant-tabs-tab.ant-tabs-tab-active:hover .ant-tabs-tab-btn {
|
||
|
@apply text-brand-600;
|
||
|
}
|
||
|
|
||
|
.ant-tabs-nav {
|
||
|
@apply pl-2.5 mb-0;
|
||
|
}
|
||
|
|
||
|
.ant-tabs-ink-bar {
|
||
|
@apply bg-brand-500 !rounded-t-xl;
|
||
|
}
|
||
|
}
|
||
|
</style>
|