bad style but this works
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-07-11 00:18:24 +02:00
parent 09139f9ad6
commit 5900ac3ce5
4 changed files with 45 additions and 6 deletions

View file

@ -1,6 +1,9 @@
<script lang="ts"> <script lang="ts">
import InfoTab from "./InfoTab.svelte"; import InfoTab from './tabs/InfoTab.svelte';
import DescTab from './tabs/DescTab.svelte';
import MapTab from './tabs/MapTab.svelte';
let component = InfoTab;
const activeClicked = (evt) => { const activeClicked = (evt) => {
const clickedTab = evt.target.closest('button'); const clickedTab = evt.target.closest('button');
@ -9,17 +12,31 @@
} }
clickedTab.classList.add('active'); clickedTab.classList.add('active');
switch (clickedTab.getAttribute('id')) {
case 'info':
component = InfoTab;
break;
case 'desc':
component = DescTab;
break;
case 'map':
component = MapTab;
break;
}
}; };
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div id="tabs" on:click={activeClicked}> <div id="tabs" on:click={activeClicked}>
<button class="active">Info</button> <button id="info" class="active">Info</button>
<button>Descrizione</button> <button id="desc">Descrizione</button>
<button>Mappa</button> <button id="map">Mappa</button>
</div>
<div class="tab">
<svelte:component this={component} />
</div> </div>
<InfoTab></InfoTab>
<style> <style>
#tabs { #tabs {

View file

@ -0,0 +1,14 @@
<div>
The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum."
</div>
<style>
div {
padding: 10px;
}
</style>

View file

@ -0,0 +1,8 @@
<div>
The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum."
</div>