This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/admin/bando/demos/StackLayer.svelte

40 lines
767 B

<script>
let first_top = true;
</script>
<style>
display {
width: 100%;
border: 1px solid var(--value0);
display: flex;
flex-direction: row;
}
first {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--red);
color: var(--value8);
}
second {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--yellow);
}
</style>
<display class="stacked" style="--aspect-ratio: 10/3;">
<first class="layer" class:top={ first_top }>
<h1>I Am On Top</h1>
</first>
<second class="layer" class:top={ !first_top }>
<h1>I Am On Bottom</h1>
</second>
</display>
<br/>
<button on:click={() => first_top = !first_top}>Swap Layers</button>