Add event handlers

This commit is contained in:
Vadim
2021-01-19 22:12:12 +03:00
parent 175ef582f6
commit b77e85cf74

View File

@@ -1,22 +1,42 @@
<script> <script>
import { onMount } from 'svelte'
/** /**
* Enable Next/Previos arrows * Enable Next/Previos arrows
*/ */
export let arrows = true; export let arrows = true;
let contentContainerElement
let children
onMount(() => {
children = contentContainerElement.children
})
function handleLeftClick() {
// TODO: implement
}
function handleRightClick() {
// TODO: implement
}
</script> </script>
<div class="main-container"> <div class="main-container">
{#if arrows} {#if arrows}
<div class="side-container"> <div class="side-container">
<span class="clickable">&lt;</span> <span
class="clickable"
on:click={handleLeftClick}
>&lt;</span>
</div> </div>
{/if} {/if}
<div class="content-container"> <div class="content-container" bind:this={contentContainerElement}>
<slot></slot> <slot></slot>
</div> </div>
{#if arrows} {#if arrows}
<div class="side-container"> <div class="side-container">
<span class="clickable">&gt;</span> <span
class="clickable"
on:click={handleRightClick}
>&gt;</span>
</div> </div>
{/if} {/if}
</div> </div>
@@ -28,6 +48,7 @@
} }
.content-container { .content-container {
flex: 1; flex: 1;
display: flex;
} }
.side-container { .side-container {
background-color: cornflowerblue; background-color: cornflowerblue;