29 lines
625 B
Svelte
29 lines
625 B
Svelte
<script>
|
|
import "$lib/css/base.css";
|
|
import "$lib/css/button-slider.css";
|
|
import { createEventDispatcher } from "svelte";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
export let keys = ["Button1", "Button2"];
|
|
export let active = 0;
|
|
export let width = "100%";
|
|
|
|
function changeActive(id) {
|
|
dispatch("click", { id: id });
|
|
active = id;
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="button-slider-container center"
|
|
style="--button-slider-width: {width}"
|
|
>
|
|
{#each keys as k, id}
|
|
<button
|
|
class={id === active ? "button-slider-active" : ""}
|
|
on:click={() => {
|
|
changeActive(id);
|
|
}}><span>{k}</span></button
|
|
>
|
|
{/each}
|
|
</div>
|