carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.71k stars 261 forks source link

feat(tree-view): make `node` slottable #1843

Closed metonym closed 1 year ago

metonym commented 1 year ago

Closes #1660

Currently, the TreeView will only render the node.text (string). It could be useful to override the display value and/or provide custom styles.

This PR makes the node slottable.

The most basic usage is to access the metadata via the let:node directive and override the default slot.

<TreeView children="{children}" let:node>
  {node.id}
  {node.text}
  {node.expanded}
  {node.selected}
  {node.disabled}
  {node.leaf} // True if the node is a leaf (node does not have children)
</TreeView>

The node metadata can be used to conditionally apply logic/styles:

<TreeView children="{children}" let:node>
  <span
    style:font-weight="{node.selected ? 600 : "inherit"}"
    style:opacity="{node.selected ? 1 : 0.4}"
  >
    {node.text} ({node.id})
  </span>
</TreeView>

The code example above produces the following:

Screenshot 2023-11-11 at 1 46 01 PM