platform/plugins/training-resources/src/components/PanelBody.svelte

54 lines
956 B
Svelte
Raw Normal View History

<!--
Copyright @ 2024 Hardcore Engineering Inc.
-->
<script lang="ts">
import { type IModeSelector, TabList } from '@hcengineering/ui'
export let modes: IModeSelector<any>
$: tabItems = modes.config.map((c) => {
return {
id: c[0],
labelIntl: c[1],
labelParams: c[2]
}
})
</script>
<div class="root">
<div class="tabs popupPanel-title">
<TabList
items={tabItems}
selected={modes.mode}
kind={'plain'}
adaptiveShrink={null}
on:select={(event) => {
modes.onChange(event.detail.id)
}}
/>
</div>
<div class="content">
<slot />
</div>
</div>
<style lang="scss">
.root {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
position: relative;
}
.tabs {
flex: 0;
border-bottom: 1px solid var(--theme-divider-color);
}
.content {
flex: 1;
overflow-y: scroll;
position: relative;
}
</style>