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.
svelte/documentation/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte

55 lines
842 B

<script>
import File from './File.svelte';
export let expanded = false;
export let name;
export let files;
function toggle() {
expanded = !expanded;
}
</script>
<button class:expanded on:click={toggle}>{name}</button>
{#if expanded}
<ul>
{#each files as file}
<li>
{#if file.files}
<!-- show folder -->
{:else}
<File {...file} />
{/if}
</li>
{/each}
</ul>
{/if}
<style>
button {
padding: 0 0 0 1.5em;
background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
background-size: 1em 1em;
font-weight: bold;
cursor: pointer;
border: none;
margin: 0;
}
.expanded {
background-image: url(/tutorial/icons/folder-open.svg);
}
ul {
padding: 0.2em 0 0 0.5em;
margin: 0 0 0 0.5em;
list-style: none;
border-left: 1px solid #eee;
}
li {
padding: 0.2em 0;
}
</style>