63 lines
992 B
Svelte
63 lines
992 B
Svelte
<script lang="ts">
|
|
|
|
import type { Snippet } from "svelte";
|
|
|
|
let { id, label, children } : { id: string, label: string, children: Snippet } = $props();
|
|
|
|
let _id = id + "_check";
|
|
</script>
|
|
|
|
<input type="checkbox" id={_id} style:display="none">
|
|
<label for={_id}>
|
|
<span class="twister closed"><span class="twister-inner">▷</span></span><span class="twister open"><span class="twister-inner">▽</span></span>{label}
|
|
</label>
|
|
<div class="hidden">
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style>
|
|
|
|
label {
|
|
display: block;
|
|
width: 100%;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.twister {
|
|
width: 1ch;
|
|
padding-right: 2ch;
|
|
}
|
|
|
|
.twister-inner {
|
|
height: 100%;
|
|
|
|
vertical-align: middle;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.open {
|
|
display: none;
|
|
}
|
|
.closed {
|
|
display: inline-block;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
|
|
padding-top: 5px;
|
|
padding-left: 3ch;
|
|
}
|
|
|
|
:checked + label + .hidden {
|
|
display: block;
|
|
}
|
|
:checked + label .closed {
|
|
display: none;
|
|
}
|
|
:checked + label .open {
|
|
display: inline-block;
|
|
}
|
|
|
|
</style>
|