mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Closes #1660
This commit is contained in:
metonym 2023-11-12 14:15:28 -08:00 • committed by GitHub
commit 6a55fef62e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 150 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

19
docs/src/pages/components/TreeView.svx
View file

@ -1,5 +1,5 @@
<script>
import { InlineNotification } from "carbon-components-svelte";
import { InlineNotification, UnorderedList, ListItem } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -17,6 +17,23 @@ A parent node contains `children` while a leaf node does not.
<FileSource src="/framed/TreeView/TreeView" />
## Slottable node
By default, each item renders the value of `node.text`. Use the data from `let:node` directive to override the default slot.
The destructured `let:node` contains the following properties:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<ListItem><strong>id</strong>: the node id</ListItem>
<ListItem><strong>text</strong>: the node text</ListItem>
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
<ListItem><strong>leaf</strong>: true if the node does not have children</ListItem>
<ListItem><strong>disabled</strong>: true if the node is disabled</ListItem>
<ListItem><strong>selected</strong>: true if the node is selected</ListItem>
</UnorderedList>
<FileSource src="/framed/TreeView/TreeViewSlot" />
## Initial active node
The active node can be set through `activeId`.