File size: 983 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<script lang="ts">
export let expanded = false;
export let title: string;
function toggleExpanded(): void {
expanded = !expanded;
}
</script>
<button class="box" on:click={toggleExpanded}>
<div class="title">
<span class="title-text">{title}</span>
<span
style:transform={expanded ? "rotate(0)" : "rotate(90deg)"}
class="arrow"
>
▼
</span>
</div>
{#if expanded}
<div class="content">
<slot></slot>
</div>
{/if}
</button>
<style>
.box {
border-radius: 4px;
cursor: pointer;
max-width: max-content;
background: var(--color-accent-soft);
border: 1px solid var(--border-color-accent-subdued);
font-size: 0.8em;
}
.title {
display: flex;
align-items: center;
padding: 3px 6px;
color: var(--body-text-color);
opacity: 0.8;
}
.content {
padding: 4px 8px;
}
.content :global(*) {
font-size: 0.8em;
}
.title-text {
padding-right: var(--spacing-lg);
}
.arrow {
margin-left: auto;
opacity: 0.8;
}
</style>
|