diff --git a/src/lib/Tabs.svelte b/src/lib/Tabs.svelte index 0bbabb2..b64681d 100644 --- a/src/lib/Tabs.svelte +++ b/src/lib/Tabs.svelte @@ -23,22 +23,17 @@ activeIndex?: number; /** Callback fired when the active tab changes */ onchange?: (event: { index: number; tab: TabPage }) => void; - /** Applies layout padding to the tab header (default: false) */ - padHeader?: boolean; - /** Applies layout padding to the content areas (default: false) */ - padContent?: 'padding' | 'margin' | 'none'; + /** + * Controls padding of content areas. True applies padding to content + * and header, false applies no padding (default), and 'content' and + * 'header' apply padding to their respective areas only. + */ + padded?: boolean | 'content' | 'header'; /** Additional classes applied to the outer container */ class?: ClassValue | null; } - let { - pages, - activeIndex = 0, - onchange, - padHeader = false, - padContent = 'none', - class: classValue - }: Props = $props(); + let { pages, activeIndex = 0, onchange, padded = false, class: classValue }: Props = $props(); let primaryContainerEl: HTMLDivElement; let tabContainerEl: HTMLDivElement; @@ -109,7 +104,7 @@ bind:this={tabContainerEl} class={[ 'border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2', - padHeader && 'px-layout' + padded === true || padded === 'header' ? 'px-layout' : '' ]} > {#each pages as page, i (page.title)} @@ -144,7 +139,7 @@ {#key activeIndex}
prevIndex ? 1 : -1, duration: 180, delay: 181 }} out:flyX={{ direction: activeIndex > prevIndex ? -1 : 1, duration: 180 }} onoutrostart={lockHeight} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8158e3e..dd96068 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -448,7 +448,7 @@

Tabs