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.
74 lines
1.4 KiB
74 lines
1.4 KiB
<script lang="ts" setup> |
|
const props = defineProps<{ |
|
modelValue?: string |
|
centered?: boolean |
|
theme?: 'default' | 'ai' |
|
}>() |
|
</script> |
|
|
|
<template> |
|
<a-tabs |
|
class="nc-tabs" |
|
:class="{ |
|
'centered': props.centered, |
|
'theme-ai': props.theme === 'ai', |
|
}" |
|
> |
|
<slot /> |
|
|
|
<template v-if="$slots.leftExtra" #leftExtra> |
|
<slot name="leftExtra" /> |
|
</template> |
|
<template v-if="$slots.rightExtra" #rightExtra> |
|
<slot name="rightExtra" /> |
|
</template> |
|
</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; |
|
} |
|
} |
|
} |
|
|
|
.ant-tabs-tab + .ant-tabs-tab { |
|
@apply ml-4; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
&.theme-ai { |
|
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { |
|
@apply text-purple-600; |
|
} |
|
.ant-tabs-tab.ant-tabs-tab-active:hover .ant-tabs-tab-btn { |
|
@apply text-purple-700; |
|
} |
|
.ant-tabs-ink-bar { |
|
@apply bg-purple-500; |
|
} |
|
} |
|
} |
|
</style>
|
|
|