Sidebar

Sidebar content will be placed below or above the main content at the minimum width.

Expects only two child elements, slots for main-content and sidebar. Use <svelte:fragment> elements to avoid adding extra wrapper divs to the rendered html. ie:

<svelte:fragment slot="sidebar">...</svelte:fragment>

<svelte:fragment slot="main-content">...</svelte:fragment>

If flexbox gap is not supported, expects a no-flexbox-gap class to be applied to a parent element.

In this case sidebarSpace is applied as as padding around the .main-content and .sidebar elements.

Usage

<script>
	import { Sidebar } from 'creditdesign-svelte-components';
</script>

<Sidebar
	sidebarContentMinWidth="75%"
	sidebarOnRight={false}
	sidebarSpace="var(--s-1)"
	sidebarWidth="inherit"
	alignItems="stretch"
	className="test"
>
	<svelte:fragment slot="sidebar">
		<div>Sidebar</div>
	</svelte:fragment>
	<svelte:fragment slot="main-content">
		<div>Main content</div>
	</svelte:fragment>
</Sidebar>

Props

Examples