Browse Source

implements working TreeView component

pull/1431/head
Keviin Åberg Kultalahti 5 years ago
parent
commit
fb77d95e34
  1. 18
      packages/bbui/src/TreeView/Item.svelte
  2. 5
      packages/bbui/src/TreeView/Tree.svelte

18
packages/bbui/src/TreeView/Item.svelte

@ -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}
{#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>
<ul class="spectrum-TreeView">
<slot />
</ul>
{:else}
</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>
</a>
{/if}
</li>

5
packages/bbui/src/TreeView/Tree.svelte

@ -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…
Cancel
Save