You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
650 B
37 lines
650 B
5 months ago
|
<script lang="ts">
|
||
|
|
/**
|
||
|
|
* Eidos `<Wrap>` — flex row that always wraps. Use when you want a
|
||
|
|
* cluster of tags / chips / pills that should reflow across multiple
|
||
|
|
* lines on narrow viewports.
|
||
|
|
*
|
||
|
|
* <Wrap gap={2}>{#each tags as t}<Tag>{t}</Tag>{/each}</Wrap>
|
||
|
|
*/
|
||
|
|
import Flex from '../flex/flex.svelte';
|
||
|
|
import type { WrapProps } from './types';
|
||
|
|
|
||
|
|
let {
|
||
|
|
gap,
|
||
|
|
rowGap,
|
||
|
|
columnGap,
|
||
|
|
align,
|
||
|
|
justify,
|
||
|
|
class: className,
|
||
|
|
children,
|
||
|
|
...restProps
|
||
|
|
}: WrapProps = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Flex
|
||
|
|
{...restProps}
|
||
|
|
wrap="wrap"
|
||
|
|
{gap}
|
||
|
|
{rowGap}
|
||
|
|
{columnGap}
|
||
|
|
{align}
|
||
|
|
{justify}
|
||
|
|
class={className}
|
||
|
|
data-wrap=""
|
||
|
|
>
|
||
|
|
{@render children?.()}
|
||
|
|
</Flex>
|