Reel (<e-reel>)

The e-reel component creates a horizontally scrolling container with customizable item widths, spacing, and scrollbar appearance. It’s ideal for displaying items like images or cards that overflow the container.

Basic Usage

Horizontal Reel:

<e-reel item-width="10em" gap="0.5rem" height="15em">
  <img src="/e-layout/thumb_1.jpg" alt="Placeholder 1">
  <img src="/e-layout/thumb_2.jpg" alt="Placeholder 2">
  <img src="/e-layout/thumb_3.jpg" alt="Placeholder 3">
</e-reel>

**Without Scrollbar:**

```html
<e-reel no-bar>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</e-reel>

Examples

Image Reel: height="10em" gap="0.5rem"

Placeholder 1 Placeholder 2 Placeholder 3 Placeholder 4 Placeholder 5

Fixed Item Width & No Scrollbar: item-width="10em" no-bar padding="0.5em"

Item 1 (10em)
Item 2 (10em)
Item 3 (10em)
Item 4 (10em)

Properties

  • item-width <string> (Default: 'auto')
    • Width of each item. Maps to --reel-item-width. Attribute: item-width.
  • gap <string> (Default: '1rem')
    • Space between items. Maps to --reel-gap. Attribute: gap.
  • height <string> (Default: 'auto')
    • Height of the reel container. Maps to --reel-height. Attribute: height.
  • padding <string> (Default: '0')
    • Padding of the reel container. Maps to --reel-padding. Attribute: padding.
  • no-bar <boolean> (Default: false)
    • If true, hides the scrollbar. Attribute: no-bar.