1
0
Fork 0
mirror of synced 2024-08-04 12:51:47 +12:00
budibase/packages/standard-components/src/Container.svelte

64 lines
1.3 KiB
Svelte
Raw Normal View History

<script>
import { getContext } from "svelte"
const { styleable } = getContext("app")
2020-02-26 04:21:23 +13:00
export let className = ""
export let type = "div"
export let styles
</script>
2020-02-26 04:21:23 +13:00
{#if type === 'div'}
<div use:styleable={styles}>
<slot />
</div>
2020-02-26 04:21:23 +13:00
{:else if type === 'header'}
<header use:styleable={styles}>
<slot />
</header>
2020-02-26 04:21:23 +13:00
{:else if type === 'main'}
<main use:styleable={styles}>
<slot />
</main>
2020-02-26 04:21:23 +13:00
{:else if type === 'footer'}
<footer use:styleable={styles}>
<slot />
</footer>
2020-02-26 04:21:23 +13:00
{:else if type === 'aside'}
<aside use:styleable={styles}>
<slot />
</aside>
2020-02-26 04:21:23 +13:00
{:else if type === 'summary'}
<summary use:styleable={styles}>
<slot />
</summary>
2020-02-26 04:21:23 +13:00
{:else if type === 'details'}
<details use:styleable={styles}>
<slot />
</details>
2020-02-26 04:21:23 +13:00
{:else if type === 'article'}
<article use:styleable={styles}>
<slot />
</article>
2020-02-26 04:21:23 +13:00
{:else if type === 'nav'}
<nav use:styleable={styles}>
<slot />
</nav>
2020-02-26 04:21:23 +13:00
{:else if type === 'mark'}
<mark use:styleable={styles}>
<slot />
</mark>
2020-02-26 04:21:23 +13:00
{:else if type === 'figure'}
<figure use:styleable={styles}>
<slot />
</figure>
2020-02-26 04:21:23 +13:00
{:else if type === 'figcaption'}
<figcaption use:styleable={styles}>
<slot />
</figcaption>
2020-02-26 04:21:23 +13:00
{:else if type === 'paragraph'}
<p use:styleable={styles}>
<slot />
</p>
{/if}