About
A simple list container that renders child elements in a vertical stack with consistent spacing.
When the selectable attribute is set, items become clickable and the component
fires ars-list:select events with { index, item } detail.
Static List (non-selectable)
🍎 Apple
🍌 Banana
🍒 Cherry
🍇 Grape
<ars-list>
<div class="list-item">🍎 Apple</div>
<div class="list-item">🍌 Banana</div>
<div class="list-item">🍒 Cherry</div>
</ars-list>
Selectable List
Click an item to select it. Fires ars-list:select.
📨 Inbox
📤 Sent
📝 Drafts
⭐ Starred
🗑️ Trash
<ars-list selectable>
<div class="list-item">📨 Inbox</div>
<div class="list-item">📤 Sent</div>
</ars-list>
With Mixed Content
Task 1 — Design review
Task 2 — API integration
Task 3 — Unit tests
Event Monitor
Listening for ars-list:select…
Theme Toggle
Usage
<ars-list selectable>
<div>Item 1</div>
<div>Item 2</div>
</ars-list>
<script type="module">
import { ArsList } from 'ars-web-components';
document.querySelector('ars-list')
.addEventListener('ars-list:select', (e) => {
console.log('Selected index:', e.detail.index);
});
</script>