mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 18:36:53 +00:00
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
interface Props {
|
|
bottomBorder?: boolean
|
|
}
|
|
withDefaults(defineProps<Props>(), {
|
|
bottomBorder: true,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="nc-page-header"
|
|
:class="{
|
|
'border-b-1 border-nc-border-gray-medium': bottomBorder,
|
|
}"
|
|
>
|
|
<div class="flex-1 flex items-start gap-3">
|
|
<div v-if="$slots.icon" class="h-7 flex items-center children:flex-none text-nc-content-gray-subtle">
|
|
<slot name="icon"></slot>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<h1 class="nc-page-header-title truncate">
|
|
<slot name="title"></slot>
|
|
</h1>
|
|
<p v-if="$slots.subtitle" class="nc-page-header-subtitle">
|
|
<slot name="subtitle"></slot>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="$slots.action">
|
|
<slot name="action"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.nc-page-header {
|
|
@apply h-12 flex items-center gap-3 px-3 py-2 min-h-[var(--topbar-height)];
|
|
|
|
.nc-page-header-title {
|
|
@apply text-xl font-semibold text-nc-content-gray my-0;
|
|
}
|
|
.nc-page-header-subtitle {
|
|
@apply text-sm font-weight-500 text-nc-content-gray-subtle;
|
|
}
|
|
}
|
|
</style>
|