Item @astryx-svelte/core v0.3.0 · Item
Usage
A single, flexible item primitive that unifies the "start content + label + description + end content" pattern across Astryx. Use it wherever you need a structured row: dropdown menus, selectors, contact lists, notifications, file browsers, and activity feeds.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use named slots (startContent, label, description, endContent) for the common layout. These cover the 80% case. |
| Do | Use density="compact" for menus and dense lists, "balanced" for standard rows, and "spacious" for roomier layouts. |
| Do | Set labelLines and descriptionLines to control truncation when content length varies. |
| Do | Use align="start" when start or end content is taller than a single line of text. |
| Don't | Don't nest interactive elements (buttons, links) inside an interactive Item; it creates confusing focus and click targets. |
| Don't | Don't use Item for navigation between views; use proper navigation components instead. |
| Don't | Don't add read/unread or inbox-specific behavior directly; compose a thin wrapper like PreviewItem instead. |
Examples
Common configurations, variations, and states.Item — Basic
A basic item with a label, supporting description, and end-aligned timestamp. Use this for simple rows that need consistent text alignment and spacing.
Item — Start Content
Items with leading avatars and icons in the startContent slot. Keep start content small so the row stays compact and easy to scan.
Item — Metadata
Items with end-aligned metadata and badges. Use the endContent slot for counts, status, timestamps, and other secondary row information.