@@ -414,14 +414,14 @@ Now we can render a Tree using far less code.
414
414
415
415
``` tsx example
416
416
<Tree aria-label = " Files" style = { {height: ' 300px' }} defaultExpandedKeys = { [' documents' , ' photos' , ' project' ]} >
417
- <MyTreeItem title = " Documents" >
418
- <MyTreeItem title = " Project" >
419
- <MyTreeItem title = " Weekly Report" />
417
+ <MyTreeItem id = " documents " title = " Documents" >
418
+ <MyTreeItem id = " project " title = " Project" >
419
+ <MyTreeItem id = " report " title = " Weekly Report" />
420
420
</MyTreeItem >
421
421
</MyTreeItem >
422
- <MyTreeItem title = " Photos" >
423
- <MyTreeItem title = " Image 1" />
424
- <MyTreeItem title = " Image 2" />
422
+ <MyTreeItem id = " photos " title = " Photos" >
423
+ <MyTreeItem id = " one " title = " Image 1" />
424
+ <MyTreeItem id = " two " title = " Image 2" />
425
425
</MyTreeItem >
426
426
</Tree >
427
427
```
@@ -460,7 +460,7 @@ function FileTree(props: TreeProps<FileType>) {
460
460
return (
461
461
<Tree
462
462
aria-label = " Files"
463
- defaultExpandedKeys = { [1 , 4 ]}
463
+ defaultExpandedKeys = { [' 1 ' , ' 4 ' ]}
464
464
/* - begin highlight -*/
465
465
items = { items }
466
466
/* - end highlight -*/
@@ -506,7 +506,7 @@ A user can click on a different item to change the selection or click on the sam
506
506
507
507
``` tsx example
508
508
// Using the example above
509
- <FileTree selectionMode = " single" defaultSelectedKeys = { [2 ]} defaultExpandedKeys = { [1 ]} />
509
+ <FileTree selectionMode = " single" defaultSelectedKeys = { [' 2 ' ]} defaultExpandedKeys = { [' 1 ' ]} />
510
510
```
511
511
512
512
### Multiple selection
@@ -515,7 +515,7 @@ Multiple selection can be enabled by setting `selectionMode` to `multiple`.
515
515
516
516
``` tsx example
517
517
// Using the example above
518
- <FileTree selectionMode = " multiple" defaultSelectedKeys = { [2 , 4 ]} defaultExpandedKeys = { [1 ]} />
518
+ <FileTree selectionMode = " multiple" defaultSelectedKeys = { [' 2 ' , ' 4 ' ]} defaultExpandedKeys = { [' 1 ' ]} />
519
519
```
520
520
521
521
### Disallow empty selection
@@ -525,7 +525,7 @@ In this mode, if a single item is selected and the user presses it, it will not
525
525
526
526
``` tsx example
527
527
// Using the example above
528
- <FileTree selectionMode = " single" defaultSelectedKeys = { [2 ]} defaultExpandedKeys = { [1 ]} disallowEmptySelection />
528
+ <FileTree selectionMode = " single" defaultSelectedKeys = { [' 2 ' ]} defaultExpandedKeys = { [' 1 ' ]} disallowEmptySelection />
529
529
```
530
530
531
531
0 commit comments