1
0
Fork 0
mirror of synced 2024-07-02 04:50:44 +12:00
budibase/packages/standard-components/src/Container.svelte

49 lines
1.2 KiB
Svelte
Raw Normal View History

<script>
2020-02-26 04:21:23 +13:00
export let className = ""
export let onLoad
export let type = "div"
2020-02-26 04:21:23 +13:00
export let _bb
2020-02-22 00:43:21 +13:00
2020-02-26 04:21:23 +13:00
let containerElement
let hasLoaded
let currentChildren
2020-02-22 00:43:21 +13:00
2020-02-26 04:21:23 +13:00
$: {
if (containerElement) {
_bb.attachChildren(containerElement)
if (!hasLoaded) {
2020-09-11 08:11:05 +12:00
_bb.call("onLoad")
2020-02-26 04:21:23 +13:00
hasLoaded = true
}
}
}
</script>
2020-02-26 04:21:23 +13:00
{#if type === 'div'}
<div bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'header'}
<header bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'main'}
<main bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'footer'}
<footer bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'aside'}
<aside bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'summary'}
<summary bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'details'}
<details bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'article'}
<article bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'nav'}
<nav bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'mark'}
<mark bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'figure'}
<figure bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'figcaption'}
<figcaption bind:this={containerElement} />
2020-02-26 04:21:23 +13:00
{:else if type === 'paragraph'}
<p bind:this={containerElement} />
{/if}