@adobe/coral-spectrum
Version:
Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.
192 lines (174 loc) • 9.84 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coral.List</title>
<script>document.addEventListener('click', function(event) {if (event.target.nodeName === 'A' || event.matchedTarget && event.matchedTarget.nodeName === 'A') {event.preventDefault();}});</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<style>.hljs{background:#fff;font-size:12px;border-radius:4px;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;}</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const markup = document.body.querySelectorAll('.markup');
for (var i = 0; i < markup.length; i++) {
const code = markup[i].innerHTML;
const id = 'markup-code-' + i;
markup[i].insertAdjacentHTML('afterend',
'<div style="margin:10px 0">' +
'<a onclick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden" class="coral-Link" href="#">Toggle markup</a>' +
'<pre hidden>' +
'<code id="'+ id +'" class="html">' +
'</code>' +
'</pre>' +
'</div>');
document.getElementById(id).textContent = code;
}
window.hljs.initHighlightingOnLoad();
});
</script>
<link rel="stylesheet" href="../css/coral.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
const script = document.createElement('script');
script.src = '../js/coral.js';
script.dataset.coralIcons = '../resources/';
document.head.appendChild(script);
});
</script>
</head>
<body class="coral--lightest">
<main class="u-coral-margin">
<div style="position:absolute;top:16px;right:16px;">
<strong style="padding-right:8px"><span class="u-coral-hiddenS">Theme:</span></strong>
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--light'">Light</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--lightest'">Lightest</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--dark'">Dark</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--darkest'">Darkest</a>
<strong style="padding:0 8px 0 16px"><span class="u-coral-hiddenS">Scale:</span></strong>
<a href="#" class="coral-Link scale" onclick="document.body.classList.remove('coral--large')">Medium</a> |
<a href="#" class="coral-Link scale" onclick="document.body.classList.add('coral--large')">Large</a>
</div>
<h1 class="coral-Heading--XXL">List</h1>
<h2 class="coral-Heading--M">Usage notes</h2>
<hr class="coral-Divider--L">
<p class="coral-Body--M u-coral-padding-vertical">
Lists support button and link styled multi-line text, icons, and text wrapping with ellipsis.
</p>
<h2 class="coral--Heading--S">Default</h2>
<div class="markup">
<coral-list style="max-width:300px">
<coral-list-item icon="globe">Marketing Cloud Help<br>And more text</coral-list-item>
<coral-list-divider></coral-list-divider>
<coral-list-item icon="userGroup">Community</coral-list-item>
<coral-list-item icon="callCenter">Customer Care</coral-list-item>
<coral-list-item icon="news">What's new in Coral Spectrum</coral-list-item>
<coral-list-item icon="servers">Adobe Marketing Cloud Status</coral-list-item>
<coral-list-item icon="light">Getting Started with Coral Spectrum And Incredible Long Titles That Are Sure To Cause
Wrapping
</coral-list-item>
<coral-list-item icon="disqus" disabled>Disabled Item</coral-list-item>
<coral-list-item>No Icon</coral-list-item>
</coral-list>
</div>
<h2 class="coral--Heading--S">ButtonList</h2>
<div class="markup">
<coral-buttonlist style="max-width:300px">
<button is="coral-buttonlist-item" icon="globe" value="learn">Marketing Cloud Help<br>And more text</button>
<coral-list-divider></coral-list-divider>
<button is="coral-buttonlist-item" icon="userGroup" value="community">Community</button>
<button is="coral-buttonlist-item" icon="callCenter" value="customercare">Customer Care</button>
<button is="coral-buttonlist-item" icon="news" value="news">What's new in Coral Spectrum</button>
<button is="coral-buttonlist-item" icon="servers" value="status">Adobe Marketing Cloud Status</button>
<button is="coral-buttonlist-item" icon="light" value="getstarted">Getting Started with Coral Spectrum And Incredible
Long Titles That Are Sure To Cause Wrapping
</button>
<button is="coral-buttonlist-item" icon="disqus" value="status" disabled>Disabled Item</button>
<button is="coral-buttonlist-item" value="noicon">No Icon</button>
</coral-buttonlist>
</div>
<h2 class="coral--Heading--S">AnchorList</h2>
<div class="markup">
<coral-anchorlist style="max-width:300px">
<a is="coral-anchorlist-item" icon="globe" href="#">Marketing Cloud Help</a>
<coral-list-divider></coral-list-divider>
<a is="coral-anchorlist-item" icon="userGroup" href="#">Community</a>
<a is="coral-anchorlist-item" icon="callCenter" href="#">Customer Care</a>
<a is="coral-anchorlist-item" icon="news" href="#">What's new in Coral Spectrum</a>
<a is="coral-anchorlist-item" icon="servers" href="#">Adobe Marketing Cloud Status</a>
<a is="coral-anchorlist-item" icon="light" href="#">Getting Started with Coral Spectrum And Incredible Long
Titles That Are Sure To Cause Wrapping</a>
<a is="coral-anchorlist-item" icon="disqus" href="#" disabled>Disabled Item</a>
<a is="coral-anchorlist-item" href="#">No Icon</a>
</coral-anchorlist>
</div>
<h2 class="coral--Heading--S">SelectList</h2>
<div class="markup">
<coral-selectlist style="max-width:200px">
<coral-selectlist-item value="1">Option 1</coral-selectlist-item>
<coral-selectlist-item value="2"><coral-icon icon="add" alt="Add" title="Add"></coral-icon>Option 2 with icon</coral-selectlist-item>
<coral-selectlist-item value="4" selected>Option 4 with loooooooooong text wrapping</coral-selectlist-item>
<coral-selectlist-item value="5">Option 5</coral-selectlist-item>
</coral-selectlist>
</div>
<h2 class="coral--Heading--S">SelectList with forced selection</h2>
<div class="markup">
<coral-selectlist id="list" style="max-width:200px">
<coral-selectlist-item selected value="1">Option 1</coral-selectlist-item>
<coral-selectlist-item value="2">Option 2</coral-selectlist-item>
<coral-selectlist-item value="3">Option 3</coral-selectlist-item>
</coral-selectlist>
<script>
list.addEventListener('coral-selectlist:beforechange', function(event) {
// We prevent the selection to change if we're in single selection and the clicked item is deselected
if (!list.multiple && event.detail.item.selected) {
event.preventDefault();
}
});
</script>
</div>
<h2 class="coral--Heading--S">Multi SelectList</h2>
<div class="markup">
<coral-selectlist multiple style="max-width:200px">
<coral-selectlist-item value="1">Option 1</coral-selectlist-item>
<coral-selectlist-item value="2" selected>Option 2</coral-selectlist-item>
<coral-selectlist-item value="3" selected>Option 3</coral-selectlist-item>
</coral-selectlist>
</div>
<h2 class="coral--Heading--S">SelectList Groups</h2>
<div class="markup">
<coral-selectlist style="max-width:200px">
<coral-selectlist-group label="Group 1">
<coral-selectlist-item value="1">Option 1</coral-selectlist-item>
<coral-selectlist-item value="2" disabled>Option 2</coral-selectlist-item>
<coral-selectlist-item value="3">Option 3</coral-selectlist-item>
</coral-selectlist-group>
<coral-list-divider></coral-list-divider>
<coral-selectlist-group label="Group 2">
<coral-selectlist-item value="1">Option 1</coral-selectlist-item>
<coral-selectlist-item value="2" disabled>Option 2</coral-selectlist-item>
<coral-selectlist-item value="3">Option 3</coral-selectlist-item>
</coral-selectlist-group>
</coral-selectlist>
</div>
<h2 class="coral--Heading--S">CSS Only Lists</h2>
<div class="markup">
<ul class="coral-List">
<li class="coral-List-item">Basic List Item 1</li>
<li class="coral-List-item">Basic List Item 2</li>
<li class="coral-List-item">Basic List Item 3</li>
</ul>
<ul class="coral-List--minimal">
<li class="coral-List-item">Minimal List Item 1</li>
<li class="coral-List-item">Minimal List Item 2</li>
<li class="coral-List-item">Minimal List Item 3</li>
</ul>
<ul class="coral-List--condensed">
<li class="coral-List-item">Condensed List Item 1</li>
<li class="coral-List-item">Condensed List Item 2</li>
<li class="coral-List-item">Condensed List Item 3</li>
</ul>
</div>
</main>
</body>
</html>