implements working TreeView component
This commit is contained in:
parent
8aa6e66be2
commit
fb77d95e34
|
@ -6,8 +6,8 @@
|
|||
</script>
|
||||
|
||||
<li class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
|
||||
<a class="spectrum-TreeView-itemLink" href="#">
|
||||
{#if $$slots.default}
|
||||
<a class="spectrum-TreeView-itemLink" href="#">
|
||||
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
|
||||
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
||||
</svg>
|
||||
|
@ -17,16 +17,18 @@
|
|||
</svg>
|
||||
{/if}
|
||||
<span class="spectrum-TreeView-itemLabel">{title}</span>
|
||||
</a>
|
||||
<ul class="spectrum-TreeView">
|
||||
<slot />
|
||||
</ul>
|
||||
{:else}
|
||||
<a class="spectrum-TreeView-itemLink" href="#">
|
||||
{#if icon}
|
||||
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="spectrum-TreeView-itemLabel">{title}</span>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
|
@ -2,9 +2,10 @@
|
|||
import "@spectrum-css/treeview/dist/index-vars.css"
|
||||
|
||||
export let quiet = false
|
||||
export let width;
|
||||
export let standalone = true
|
||||
export let width = '250px';
|
||||
</script>
|
||||
|
||||
<ul class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
|
||||
<ul class:spectrum-TreeView--standalone={standalone} class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
|
||||
<slot />
|
||||
</ul>
|
Loading…
Reference in New Issue