Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 12, 2023
Merged

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

merged 3 commits into from
Nov 12, 2023

Conversation

metonym
Copy link
Collaborator

@metonym metonym commented Nov 11, 2023

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

@metonym metonym marked this pull request as ready for review November 12, 2023 17:37
@metonym metonym merged commit 6a55fef into master Nov 12, 2023
3 checks passed
@metonym metonym deleted the treeview-item-slot branch November 12, 2023 22:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support TreeView item label templating
1 participant