Attachments
kai-attachments
Render a set of file attachments — one element, three presentations chosen by a single attribute. Tiles for a gallery, chips for inline, rows for a list.
- Shadow DOM
- 3 variants
- Hover-card preview
- Removable items
Preview
Section titled “Preview”Set items in JavaScript (arrays can’t be HTML attributes); choose the presentation with the variant, hover-card, and removable attributes; listen for kai-remove.
Examples
Section titled “Examples”variant="grid" — square image tiles for a gallery.
Inline
Section titled “Inline”variant="inline" — a compact icon + label chip per file, for a composer or message body.
variant="list" — full-width rows with a preview thumbnail, filename and media type.
Removable
Section titled “Removable”Add removable for a per-item remove button (the ×); it fires the kai-remove event.
Hover preview
Section titled “Hover preview”Add hover-card to reveal each item’s details on hover — useful on grid, where the tile shows only the image.
| Property | Type | Default | Notes |
|---|---|---|---|
| items | | [] | The attachments to render. Set as a JS property (array). |
| variant | "grid" | "inline" | "list" | 'grid' | Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows. |
| hoverCard | boolean | false | Wrap each item in a hover card that previews its details. |
| removable | boolean | false | Show a remove button per item; clicking it fires a `kai-remove` event. |
| showMediaType | boolean | false | Also show the media type beneath the filename (non-grid variants). |
| emptyText | string | — | Text shown when `items` is empty. |
Events
Section titled “Events”| Event | Detail | Notes |
|---|---|---|
| kai-remove | | A remove button was clicked. |
Composed from
Section titled “Composed from”This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.