Page MenuHomeSealhub
Files F1262579

tabs.ts
No OneTemporary
Actions

tabs.ts
View Options

import { FlatTemplatable, tempstream } from "tempstream";
function name_to_id(str: string) {
return str.replace(/\W/g, "-");
}
const style = (hide_tabs_width: number) => /* HTML */ `<style>
.tab-label {
height: 45px;
line-height: 45px;
padding: 0 45px;
display: block;
float: left;
box-sizing: border-box;
border-bottom: 3px solid transparent;
cursor: pointer;
font-size: 18px;
-webkit-user-select: none;
user-select: none;
}
@media screen and (max-width: ${hide_tabs_width}px) {
.tab-label {
display: none;
}
}
.tab-label--mobile {
line-height: unset;
padding-top: 30px;
padding-left: 0;
pointer-events: none;
padding-bottom: 30px;
color: $font-graphite;
border-bottom: 2px solid $font-primary;
display: none;
@media screen and (max-width: ${hide_tabs_width}px) {
display: block;
}
}
.tab-content {
padding-top: 30px;
clear: both;
}
@media screen and (max-width: ${hide_tabs_width}px) {
.tab-content {
display: block !important;
}
}
</style>`;
export function tabs(
tabs: Record<string, FlatTemplatable>,
selected_tab_style = "font-weight: bold;",
selected_index = 0,
hide_tabs_width = 0
): FlatTemplatable {
return /* HTML */ tempstream`${style(hide_tabs_width)}
${Object.keys(tabs)
.map((tab_title, index) => {
const id = name_to_id(tab_title);
return /* HTML */ `<input
type="radio"
name="tabs"
id="${id}"
class="tab-radio--${id}"
style="display: none"
${selected_index == index ? "checked" : ""}
/>
<label class="tab-label tab-label--${id}" for="${id}">
${tab_title}
</label>`;
})
.join("\n")}
${Object.entries(tabs).map(([title, content]) => {
const id = name_to_id(title);
return /* HTML */ tempstream`<div class="tab-label tab-label--mobile">
${title}
</div>
<div class="tab-content tab-content--${id}">${content}</div>
<style>
.tab-radio--${id} ~ .tab-content--${id} {
display:none;
}
.tab-radio--${id}:checked ~ .tab-content--${id} {
display:block;
}
.tab-radio--${id}:checked ~ label.tab-label--${id} {
${selected_tab_style}
}
</style>`;
})}`;
}

File Metadata

Mime Type
text/html
Expires
Fri, Jan 24, 15:15 (1 d, 14 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
599631
Default Alt Text
tabs.ts (2 KB)

Event Timeline