84 lines
3.3 KiB
Markdown
84 lines
3.3 KiB
Markdown
# Item Component
|
|
|
|
A small reusable UI component that shows an image on the left and three text areas on the right.
|
|
|
|
## Files
|
|
|
|
- `item-component.js` — ES module that exports `createItemComponent()` (default export).
|
|
- `index.html` — example usage (the project includes a demo where multiple items are laid out in a responsive grid).
|
|
|
|
## Import
|
|
|
|
Use as an ES module in a browser environment:
|
|
|
|
```html
|
|
<script type="module">
|
|
import createItemComponent from './item-component.js';
|
|
|
|
const el = createItemComponent({
|
|
imgSrc: 'images/example.jpg',
|
|
imgAlt: 'Item image',
|
|
text1: 'Title',
|
|
text2: 'Subtitle',
|
|
text3: 'Description or note',
|
|
editable: false
|
|
});
|
|
|
|
document.body.appendChild(el);
|
|
</script>
|
|
```
|
|
|
|
## Options
|
|
|
|
- `imgSrc` (string) — image URL. If omitted, an empty `<img>` is created.
|
|
- `imgAlt` (string) — image alt text.
|
|
- `text1` (string) — first text area (displayed as title by default).
|
|
- `text2` (string) — second text area (subtitle).
|
|
- `text3` (string) — third text area (description).
|
|
- `editable` (boolean) — when `true` the text areas are rendered as editable `<textarea>` elements instead of static text.
|
|
- `imgWidth`, `imgHeight` (number) — optional image dimensions in pixels (default 80 each).
|
|
|
|
## Layout & Styling
|
|
|
|
`item-component.js` injects a small stylesheet into the document head when first used. Key classes:
|
|
|
|
- `.item-component` — single item container.
|
|
- `.item-component__img img` — the image element.
|
|
- `.item-component__content` — wrapper for the three text lines.
|
|
- `.item-component__line--title`, `--subtitle`, `--desc` — line-specific classes.
|
|
- `.item-component-grid` — helper grid wrapper (3 columns by default). Wrap multiple item components in an element with this class to arrange them side-by-side.
|
|
|
|
Example: place components side-by-side by giving the parent `class="item-component-grid"` (see `index.html`). The stylesheet includes responsive breakpoints (3 → 2 → 1 column).
|
|
|
|
## Examples
|
|
|
|
Render multiple items in a grid (as used in `index.html`):
|
|
|
|
```html
|
|
<div id="items" class="item-component-grid"></div>
|
|
<script type="module">
|
|
import createItemComponent from './item-component.js';
|
|
const root = document.getElementById('items');
|
|
[
|
|
{ imgSrc: 'https://picsum.photos/seed/1/200/200', text1: 'A', text2: 'B', text3: 'C' },
|
|
{ imgSrc: 'https://picsum.photos/seed/2/200/200', text1: 'D', text2: 'E', text3: 'F' }
|
|
].forEach(data => root.appendChild(createItemComponent(data)));
|
|
</script>
|
|
```
|
|
|
|
## Customization
|
|
|
|
- To change image size, pass `imgWidth` and `imgHeight` when creating the component.
|
|
- To alter the default grid columns or spacing globally, add your own CSS targeting `.item-component-grid` (the injected styles are minimal and can be overridden by another stylesheet loaded later).
|
|
- To change the visual chrome (border, background, radius), override `.item-component` styles in `main.css` or another stylesheet loaded after the component.
|
|
|
|
## Notes
|
|
|
|
- The component is vanilla JS with no external dependencies.
|
|
- Works in modern browsers that support ES modules.
|
|
|
|
If you want, I can:
|
|
- Add a small README with screenshots.
|
|
- Add local example images under an `images/` folder and update `index.html` to use them.
|
|
- Export the component as a custom element (`<item-component>`) instead of a factory function.
|