tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Budibase is an open-source low-code platform for creating internal apps in minutes. Supports PostgreSQL, MySQL, MSSQL, MongoDB, Rest API, Docker, K8s 🚀
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8029 Commits
2 Branches
842 Tags
313 MiB
 
 
 
 
 
 
Tree: c8b772b8c1
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c8b772b8c1'
${ noResults }
budibase/packages/standard-components/node_modules/@spectrum-css/treeview/metadata/treeview.yml

722 lines
36 KiB
Raw Blame History

name: Tree View
description: |
The typical usage of a treeview involves nesting a `.spectrum-Treeview` element within the `.spectrum-TreeView-item` parent element.
The visibility of child treeviews is controlled by adding `.is-open` to the `.spectrum-TreeView-item` of the parent element.
sections:
- name: Migration Guide
description: |
### Additional clases
The following classes must be added:
* `.spectrum-TreeView-label` is now required to wrap labels to enable truncation behavior
* `.spectrum-Treeview-icon` is now required on all non-indicator icons
### Renamed classes
* `.spectrum-TreeView-indicator` renamed to `.spectrum-TreeView-itemIndicator`
* `.spectrum-TreeView-icon` renamed to `.spectrum-TreeView-itemIcon`
### Moved classes
* `.is-drop-target` and `.is-selected` must be placed on the `.spectrum-TreeView-item` element
### Workflow icon size
* Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
examples:
- id: treeview
name: Standard
description: |
Standard treeviews span the entire width of their parent container and are used within panels.
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Design Files</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
</li>
</ul>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 2</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 3</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 4</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 5</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ui>
</li>
</ul>
- id: treeview
name: Selected
description: |
A treeview with a selected item.
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
</li>
<li class="spectrum-TreeView-item is-selected">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
</ul>
- id: treeview
name: Quiet
description: |
A treeview with quiet selection.
markup: |
<ul class="spectrum-TreeView spectrum-TreeView--quiet" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
</li>
<li class="spectrum-TreeView-item is-selected">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
</ul>
- id: treeview
name: Standalone
description: |
Standalone treeviews are meant to be used outside of a panel.
Items in standalone treeviews have rounded corners.
markup: |
<ul class="spectrum-TreeView spectrum-TreeView--standalone" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
</li>
<li class="spectrum-TreeView-item is-selected">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
</ul>
- id: treeview
name: Standalone (quiet)
description: |
A standalone, quiet treeview.
markup: |
<ul class="spectrum-TreeView spectrum-TreeView--quiet spectrum-TreeView--standalone" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
</li>
<li class="spectrum-TreeView-item is-selected">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
</ul>
- id: treeview
name: Folders & Files
description: A nested treeview with folders and files.
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Design Files</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Production Ready</span>
</a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Work in Progress</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Branding</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Assets</span>
</a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Explorations</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Document">
<use xlink:href="#spectrum-icon-18-Document"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">CocaCola_01.ai</span>
</a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Document">
<use xlink:href="#spectrum-icon-18-Document"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">CocaCola_02.ai</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Archive</span>
</a>
</li>
</ul>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">References</span>
</a>
</li>
</ul>
- id: treeview
name: Thumbnail
description: A treeview with Thumbnails.
markup: |
<ul class="spectrum-TreeView spectrum-TreeView--thumbnail" style="width: 250px">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
<img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
<img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
</div>
<span class="spectrum-TreeView-itemLabel">Composition</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
<img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
</div>
<span class="spectrum-TreeView-itemLabel">Flowers</span>
</a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
<img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>
<span class="spectrum-TreeView-itemLabel">Figure</span>
</a>
</li>
</ul>
</li>
</ul>
- id: treeview
name: Thumbnail (quiet)
description: A quiet treeview with Thumbnails.
markup: |
<ul class="spectrum-TreeView spectrum-TreeView--thumbnail spectrum-TreeView--quiet" style="width: 250px">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#" style="width: 250px">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
<img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
<img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
</div>
<span class="spectrum-TreeView-itemLabel">Composition</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
<img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
</div>
<span class="spectrum-TreeView-itemLabel">Flowers</span>
</a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
<img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>
<span class="spectrum-TreeView-itemLabel">Figure</span>
</a>
</li>
</ul>
</li>
</ul>
- id: treeview
name: Disabled
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
</li>
<li class="spectrum-TreeView-item is-disabled">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 1</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
</li>
</ul>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 2</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 3</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 4</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 5</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ui>
</li>
</ul>
- id: treeview
name: Sections
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<div class="spectrum-TreeView-heading"><span class="spectrum-TreeView-itemLabel">Section 1</span></div>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 1</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
</li>
</ul>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
</li>
<div class="spectrum-TreeView-heading"><span class="spectrum-TreeView-itemLabel">Section 2</span></div>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 2</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 3</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 4</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 5</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ui>
</li>
</ul>
- id: treeview
name: Drop target
description: |
A treeview with an item that's a drop target.
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
</li>
<li class="spectrum-TreeView-item is-drop-target">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
</ul>
- id: treeview
name: Icons
description: A treeview with icons.
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-Layers" />
</svg>
<span class="spectrum-TreeView-itemLabel">Layer 1</span>
</a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Group 1</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-Layers" />
</svg>
<span class="spectrum-TreeView-itemLabel">Layer 2</span>
</a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-Layers" />
</svg>
<span class="spectrum-TreeView-itemLabel">Layer 3</span>
</a>
</li>
</ul>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-Layers" />
</svg>
<span class="spectrum-TreeView-itemLabel">Layer 4</span>
</a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-Layers" />
</svg>
<span class="spectrum-TreeView-itemLabel">Layer 5</span>
</a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Group 2</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Group 3</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Group 4</span>
</a>
<ul class="spectrum-TreeView">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-Layers" />
</svg>
<span class="spectrum-TreeView-itemLabel">Layer 6</span>
</a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder"></use>
</svg>
<span class="spectrum-TreeView-itemLabel">Group 5</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ui>
</li>
</ul>
- id: treeview
name: Flat
description: |
A treeview drawn without nesting, suitable for infinite scrolling.
With this version of the treeview, you must manage the visibility of "child items" manually based on the open state of the "parent item."
markup: |
<ul class="spectrum-TreeView" style="width: 250px">
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1 with a long name that doesn't fit at all</span></a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 1</span>
</a>
</li>
<li class="spectrum-TreeView-item spectrum-TreeView-item--indent1">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
</li>
<li class="spectrum-TreeView-item spectrum-TreeView-item--indent1">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
</li>
<li class="spectrum-TreeView-item">
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
</li>
<li class="spectrum-TreeView-item is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 2</span>
</a>
</li>
<li class="spectrum-TreeView-item spectrum-TreeView-item--indent1 is-open">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 3</span>
</a>
</li>
<li class="spectrum-TreeView-item spectrum-TreeView-item--indent2">
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 4</span>
</a>
</li>
<li class="spectrum-TreeView-item spectrum-TreeView-item--indent3" hidden>
<a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
</li>
<li class="spectrum-TreeView-item spectrum-TreeView-item--indent3" hidden>
<a class="spectrum-TreeView-itemLink" href="#">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
<span class="spectrum-TreeView-itemLabel">Group 5</span>
</a>
</li>
</ul>