pinafore/src/routes/_components/TabSet.html

90 lines
1.5 KiB
HTML
Raw Normal View History

<nav aria-label={label} class={className}>
<ul>
{#each tabs as tab (tab.name)}
<li class="{currentTabName === tab.name ? 'current' : 'not-current'}">
<a aria-label="{tab.label} { currentTabName === tab.name ? '(Current)' : ''}"
href={tab.href}
rel="prefetch">
{tab.label}
</a>
</li>
{/each}
</ul>
</nav>
<style>
li {
flex: 1;
text-align: center;
}
/* reset */
ul, li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
display: flex;
margin: 5px 0;
box-sizing: border-box;
}
li {
border: 1px solid var(--main-border);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: var(--tab-bg);
}
li:not(:first-child) {
border-left: none;
}
li:hover {
background: var(--button-bg-hover);
}
li.not-current {
background: var(--tab-bg-non-selected);
}
li.current {
border-bottom: none;
}
li.current:hover {
background: var(--tab-bg-hover);
}
li.not-current:hover {
background: var(--tab-bg-hover-non-selected);
}
li:active {
background: var(--tab-bg-active);
}
a {
padding: 10px;
color: var(--body-text-color);
font-size: 1.1em;
flex: 1;
}
a:hover {
text-decoration: none;
}
</style>
<script>
export default {
data: () => ({
className: ''
})
}
</script>