- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Miller Columns
Component status | Contribution |
---|---|
Last released | Unreleased |
Current version | @spectrum-css/miller@3.0.3-alpha.1 |
Variants
Miller Columns (Branches Selectable)Contribution
Miller columns that allow both files and folders to be selected.
- File 1
- File 2
-
File 3
- File 1
- File 2
-
File 3
Show markup
<div class="spectrum-MillerColumns">
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel">File 2</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel">File 3</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
</ul>
</div>
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<span class="spectrum-AssetList-itemLabel">File 2</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel">File 3</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
</ul>
</div>
</div>
Miller Columns (Files Selectable)Contribution
Miller columns that only allow files to be selected.
- File 1
- File 2
-
File 3
- File 1
- File 2
-
File 3
Show markup
<div class="spectrum-MillerColumns">
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch" tabindex="0">
<span class="spectrum-AssetList-itemLabel">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item" tabindex="0">
<span class="spectrum-AssetList-itemLabel">File 2</span>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item is-navigated is-branch" tabindex="0">
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel">File 3</span></span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
</ul>
</div>
<div class="spectrum-MillerColumns-item">
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-branch" tabindex="0">
<span class="spectrum-AssetList-itemLabel">File 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item" tabindex="0">
<span class="spectrum-AssetList-itemLabel">File 2</span>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-AssetList-item is-selected" tabindex="0">
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
<span class="spectrum-AssetList-itemLabel">File 3</span>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
</ul>
</div>
</div>