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.
34 lines
618 B
34 lines
618 B
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import { TABS } from './Tabs.svelte'
|
|
|
|
const tab = {}
|
|
const { registerTab, selectTab, selectedTab } = getContext(TABS)
|
|
|
|
registerTab(tab)
|
|
</script>
|
|
|
|
<button class:selected={$selectedTab === tab} on:click={() => selectTab(tab)}>
|
|
<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;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|