add "spacer" option to PageWithHeader

This commit is contained in:
Hazelnoot 2025-05-29 23:34:55 -04:00
parent 6a75dd1a63
commit 1bd6f15868

View file

@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']"> <div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template> <template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps" :class="{ _spacer: spacer }"/></template>
<div :class="$style.body"> <div :class="{ [$style.body]: true, _spacer: spacer }">
<MkSwiper v-if="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page"> <MkSwiper v-if="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page">
<slot></slot> <slot></slot>
</MkSwiper> </MkSwiper>
@ -30,13 +30,16 @@ const props = withDefaults(defineProps<PageHeaderProps & {
reversed?: boolean; reversed?: boolean;
swipable?: boolean; swipable?: boolean;
page?: string; page?: string;
spacer?: boolean;
}>(), { }>(), {
reversed: false, reversed: false,
swipable: true, swipable: true,
page: undefined,
spacer: false,
}); });
const pageHeaderProps = computed(() => { const pageHeaderProps = computed(() => {
const { reversed, ...rest } = props; const { reversed, spacer, ...rest } = props;
return rest; return rest;
}); });