connection tab

This commit is contained in:
Jan Prochazka
2022-05-19 08:26:51 +02:00
parent a799f9b9c9
commit e59eb4b8e6
9 changed files with 224 additions and 30 deletions

View File

@@ -13,6 +13,8 @@
export let value = 0;
export let menu = null;
export let isInline = false;
export let containerMaxWidth = undefined;
export let flex1 = true;
export function setValue(index) {
value = index;
@@ -22,7 +24,7 @@
}
</script>
<div class="main">
<div class="main" class:flex1>
<div class="tabs">
{#each _.compact(tabs) as tab, index}
<div class="tab-item" class:selected={value == index} on:click={() => (value = index)}>
@@ -38,7 +40,7 @@
<div class="content-container">
{#each _.compact(tabs) as tab, index}
<div class="container" class:isInline class:tabVisible={index == value}>
<div class="container" class:isInline class:tabVisible={index == value} style:max-width={containerMaxWidth}>
<svelte:component this={tab.component} {...tab.props} tabControlHiddenTab={index != value} />
{#if tab.slot != null}
{#if tab.slot == 0}<slot name="0" />
@@ -59,10 +61,13 @@
<style>
.main {
display: flex;
flex: 1;
flex-direction: column;
}
.main.flex1 {
flex: 1;
}
.tabs {
display: flex;
height: var(--dim-tabs-height);