2021-04-15 00:52:25 +12:00
|
|
|
<script>
|
|
|
|
import "@spectrum-css/tabs/dist/index-vars.css"
|
2021-04-15 02:07:45 +12:00
|
|
|
import { writable } from 'svelte/store'
|
|
|
|
import { setContext } from 'svelte'
|
|
|
|
|
|
|
|
export let selected;
|
2021-04-15 00:52:25 +12:00
|
|
|
export let vertical = false
|
2021-04-15 02:07:45 +12:00
|
|
|
|
|
|
|
const tab = writable(selected)
|
|
|
|
setContext('tab', tab)
|
|
|
|
$: selected = $tab
|
2021-04-15 00:52:25 +12:00
|
|
|
</script>
|
|
|
|
<div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
|
2021-04-15 02:07:45 +12:00
|
|
|
<slot />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="spectrum-Tabs-content" />
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.spectrum-Tabs-content {
|
|
|
|
margin-top: var(--spectrum-global-dimension-static-size-150);
|
|
|
|
}
|
|
|
|
</style>
|