mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

TreeView (#725)

Browse source 
* feat(tree-view): add TreeView

* fix(tree-view): select initial active node, correct typedefs

* docs(tree-view): update examples

* chore(tree-view): add test for types

* docs(tree-view): rename example

* docs(tree-view): improve docs

* docs(tree-view): refine examples

* docs: fix invalid syntax

* chore: rebuild component index/api

* docs(layout): increase height of sidenav menu [ci skip]
This commit is contained in:
Eric Liu 2021-07-05 09:11:15 -07:00 • committed by GitHub
commit 6ed4aaa86e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 1176 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

45
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 169 components exported from carbon-components-svelte@0.38.2.
> 170 components exported from carbon-components-svelte@0.38.2.
## Components
@ -171,6 +171,7 @@
- [`TooltipDefinition`](#tooltipdefinition)
- [`TooltipFooter`](#tooltipfooter)
- [`TooltipIcon`](#tooltipicon)
- [`TreeView`](#treeview)
- [`Truncate`](#truncate)
- [`UnorderedList`](#unorderedlist)
@ -4649,6 +4650,48 @@ None.
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
## `TreeView`
### Types
```ts
export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: string;
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
disabled?: boolean;
expanded?: boolean;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------------------------------------------- | ---------------------- | --------------------------------------------------------------- |
| selectedIds | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be selected |
| activeId | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | <code>let</code> | No | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------------------------ |
| select | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| toggle | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| focus | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| keydown | forwarded | -- |
## `Truncate`
### Props