svelte-tree icon indicating copy to clipboard operation
svelte-tree copied to clipboard

Add props.class attributes

Open matthewmcneely opened this issue 4 years ago • 0 comments

This allows the svg paths that draw the arrows to be styled. Here's an example of responding to global CSS (dark-mode) class changes

    <div class="parent">
    <Tree class="treeClass" tree={structureTree} let:node>
        {#if node.children}
            <div class="tree-node">{node.name}</div>
        {:else}
            <div class="label-node"><AbilityBug ability={getAbilityBySkill(node.id)}></AbilityBug></div>
        {/if}
    </Tree>
    </div>

<style>
    .tree-node {
        line-height: 1.8;
    }
    :global(body.dark-mode) .parent :global(.treeClass) {
        fill: #bfc2c7;
    }
</style>

matthewmcneely avatar Dec 06 '21 21:12 matthewmcneely