2022-01-16 15:47:13 +00:00
|
|
|
<script lang="ts">
|
2022-06-10 03:44:35 +00:00
|
|
|
import { createEventDispatcher, getContext } from 'svelte'
|
2022-01-16 15:47:13 +00:00
|
|
|
import { TABS } from './Tabs.svelte'
|
|
|
|
|
|
|
|
const tab = {}
|
|
|
|
const { registerTab, selectTab, selectedTab } = getContext(TABS)
|
2022-06-10 03:44:35 +00:00
|
|
|
const dispatch = createEventDispatcher();
|
2022-01-16 15:47:13 +00:00
|
|
|
|
|
|
|
registerTab(tab)
|
|
|
|
</script>
|
|
|
|
|
2022-06-10 03:44:35 +00:00
|
|
|
<button class:selected={$selectedTab === tab} on:click={() => {selectTab(tab); dispatch("select")}}>
|
2022-01-16 15:47:13 +00:00
|
|
|
<slot />
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
button {
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
border-bottom: 2px solid white;
|
|
|
|
border-radius: 0;
|
|
|
|
margin: 0;
|
|
|
|
color: unset;
|
|
|
|
}
|
|
|
|
|
|
|
|
button:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
background-color: #8d8d8d80;
|
|
|
|
}
|
|
|
|
|
|
|
|
.selected {
|
|
|
|
border-bottom: 2px solid;
|
2022-04-14 19:52:21 +00:00
|
|
|
color: #f6ff76;
|
2022-01-16 15:47:13 +00:00
|
|
|
}
|
|
|
|
</style>
|