CODEWITHSUNDEEP
typescriptsvelte
Manixes
Manixes

Reputation: 13

In carbon-components-svelte TreeView: how to change color of children depending on text.?

I would like to ask how to change color in TreeView component depending on some property. For examples I have a tree where are items that were delete and i want their color to be red and they have ID, text, children and removed properties where removed is set to True.

https://carbon-components-svelte.onrender.com/components/TreeView

I have no idea how to do it. I have tried doing {#each}{/each} and {#if} {/if} and it didnt work out for me.

Upvotes: 1

Views: 276

Answers (2)

Bram
Bram

Reputation: 111

Since v0.82 of Svelte Carbon Components the node in a TreeView is 'slottable' so you can provide your own styling for each node. I think that might solve this problem (based on for example the node.id property).

Upvotes: 0

brunnerh
brunnerh

Reputation: 185225

There currently is no good solution to this because the component lacks a slot for templating the items.

As a hack you could abuse the id of the items, which is written to the DOM as the id attribute of the li elements.

You then can use a style to target elements with an ID signaling deletion.

const children = [
  // ...
  {
      id: '1-deleted', // generate this based on `id` + `removed` property
      text: "Analytics",
      // ...
  }
];

<div class="tree"> <!-- Element for scoping styles -->
    <TreeView {children} />
</div>

<style>
    /* `bx` prefix is likely to be changed to `cds` (carbon design system) in later versions. */
    .tree :global([id$='-deleted'] > .bx--tree-node__label),
    .tree :global([id$='-deleted'].bx--tree-node--selected > .bx--tree-node__label),
    .tree :global([id$='-deleted'] > .bx--tree-node__label:hover .bx--tree-node__label__details) {
        color: red;
    }
</style>

REPL

Upvotes: 1

Related Questions