29 lines
1.1 KiB
Svelte
29 lines
1.1 KiB
Svelte
<!-- @component
|
|
ScrollBox provides a small convenience wrapper for creating a scrollable container.
|
|
This component expects to be used as a direct child of a flex container that typically
|
|
has a constrained height. It applies the necessary CSS styles to ensure that its content
|
|
can scroll properly and that the container expands to the maximum available space within
|
|
the parent flexbox. Typically, a parent might have these Tailwind classes applied:
|
|
`flex h-full`
|
|
|
|
More complex layouts that should not expand to fill all available space should use
|
|
a custom container with `overflow-auto` and an intentionally constrained height.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import type { ClassValue } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
/** Applies ui-layout-px padding to the scrollable content area (default: false) */
|
|
padded?: boolean;
|
|
class?: ClassValue;
|
|
children?: import('svelte').Snippet;
|
|
}
|
|
|
|
let { padded = false, class: classValue, children }: Props = $props();
|
|
</script>
|
|
|
|
<div class={['min-h-0 min-w-0 flex-1 overflow-auto', padded && 'p-layout', classValue]}>
|
|
{@render children?.()}
|
|
</div>
|