@stardyn/angular-ui-repeater

Flexible and customizable repeater component with sections, columns, and rows for Angular applications. Provides a structured layout system for displaying dynamic content with configurable sections.

Features

• Flexible Layout System: Three-section layout (left, center, right) with customizable columns and rows
• Anchor Support: Fixed left/right sections with scrollable center content
• Standalone Components: All components are standalone and can be used independently
• Responsive Design: Configurable gaps, widths, and heights for responsive layouts
• TypeScript Support: Full TypeScript support with type definitions
• Performance Focused: OnPush change detection strategy for optimal performance
• Customizable Styling: CSS custom properties and flexible styling options

Installation

npm install @stardyn/angular-ui-repeater

Quick Start

1. Import Components

import { Component } from '@angular/core';
import { 
  XConUIRepeater, 
  XConUIRepeaterColumn, 
  XConUIRepeaterRow,
  XConUIRepeaterLeft,
  XConUIRepeaterCenter,
  XConUIRepeaterRight
} from '@stardyn/angular-ui-repeater';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [
    XConUIRepeater,
    XConUIRepeaterColumn,
    XConUIRepeaterRow,
    XConUIRepeaterLeft,
    XConUIRepeaterCenter,
    XConUIRepeaterRight
  ],
  template: `
    <xcon-ui-repeater>
      <xcon-ui-repeater-left>
        <xcon-ui-repeater-column title="Left Column">
          <xcon-ui-repeater-row>Left Content 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Left Content 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-left>
      
      <xcon-ui-repeater-center>
        <xcon-ui-repeater-column title="Center Column">
          <xcon-ui-repeater-row>Center Content 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Center Content 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-center>
      
      <xcon-ui-repeater-right>
        <xcon-ui-repeater-column title="Right Column">
          <xcon-ui-repeater-row>Right Content 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Right Content 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-right>
    </xcon-ui-repeater>
  `
})
export class ExampleComponent { }

2. Basic Layout with Anchors

@Component({
  template: `
    <xcon-ui-repeater 
      [leftAnchor]="true" 
      [rightAnchor]="true"
      rowGap="12px"
      columnGap="16px">
      
      <xcon-ui-repeater-left>
        <xcon-ui-repeater-column 
          title="Fixed Left" 
          columnWidth="200px"
          [showHeader]="true">
          <xcon-ui-repeater-row>Navigation Item 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Navigation Item 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-left>
      
      <xcon-ui-repeater-center>
        <xcon-ui-repeater-column 
          *ngFor="let item of items" 
          [title]="item.title"
          columnWidth="300px">
          <xcon-ui-repeater-row 
            *ngFor="let row of item.rows"
            [backgroundColor]="row.color">
            {{ row.content }}
          </xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-center>
      
      <xcon-ui-repeater-right>
        <xcon-ui-repeater-column 
          title="Fixed Right" 
          columnWidth="150px">
          <xcon-ui-repeater-row>Action 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Action 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-right>
    </xcon-ui-repeater>
  `
})
export class AdvancedExampleComponent {
  items = [
    {
      title: 'Column 1',
      rows: [
        { content: 'Row 1', color: '#f0f0f0' },
        { content: 'Row 2', color: '#e0e0e0' }
      ]
    },
    {
      title: 'Column 2', 
      rows: [
        { content: 'Row 1', color: '#f5f5f5' },
        { content: 'Row 2', color: '#eeeeee' }
      ]
    }
  ];
}

API Reference

XConUIRepeater

Main container component for the repeater layout.

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | equalColumns | boolean | true | Whether columns should have equal width | | rowGap | string | '8px' | Gap between rows inside columns | | columnGap | string | '5px' | Gap between columns and sections | | minHeight | string | '400px' | Minimum height of the repeater | | leftAnchor | boolean | false | Fix left section in place | | rightAnchor | boolean | false | Fix right section in place | | backgroundColor | string | '' | Background color of the container |

XConUIRepeaterColumn

Column component for organizing content vertically.

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | title | string | '' | Column title | | subtitle | string | '' | Column subtitle | | showHeader | boolean | false | Show/hide column header | | padding | string | '0' | Column padding | | backgroundColor | string | '' | Column background color | | columnWidth | string | '200px' | Column width | | flex | string | '1' | CSS flex value |

XConUIRepeaterRow

Row component for individual content items.

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | padding | string | '4px' | Row padding | | backgroundColor | string | '' | Row background color | | rowHeight | string | '' | Fixed row height | | alignItems | string | 'flex-start' | CSS align-items value |

Section Components

• XConUIRepeaterLeft: Left section wrapper
• XConUIRepeaterCenter: Center section wrapper
• XConUIRepeaterRight: Right section wrapper

These components are simple wrappers that accept ng-content and provide proper positioning within the repeater layout.

Layout Modes

1. Default Mode (No Anchors)

All sections scroll together horizontally.

<xcon-ui-repeater>
  <!-- All sections move together -->
</xcon-ui-repeater>

2. Left Anchor Mode

Left section is fixed, center and right sections scroll together.

<xcon-ui-repeater [leftAnchor]="true">
  <!-- Left fixed, center+right scroll -->
</xcon-ui-repeater>

3. Right Anchor Mode

Right section is fixed, left and center sections scroll together.

<xcon-ui-repeater [rightAnchor]="true">
  <!-- Left+center scroll, right fixed -->
</xcon-ui-repeater>

4. Both Anchors Mode

Left and right sections are fixed, only center section scrolls.

<xcon-ui-repeater [leftAnchor]="true" [rightAnchor]="true">
  <!-- Left+right fixed, center scrolls -->
</xcon-ui-repeater>

Styling

CSS Custom Properties

The component uses CSS custom properties that can be overridden:

:root {
  --xcon-repeater-row-gap: 8px;
  --xcon-repeater-column-gap: 16px;
  --xcon-repeater-column-padding: 12px;
}

Custom Styling

/* Custom column styling */
xcon-ui-repeater-column {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Custom row styling */
xcon-ui-repeater-row {
  transition: background-color 0.2s ease;
}

xcon-ui-repeater-row:hover {
  background-color: #f5f5f5;
}

Performance

• OnPush Change Detection: All components use OnPush strategy for optimal performance
• Standalone Components: Tree-shakable components reduce bundle size
• CSS-based Layout: Hardware-accelerated CSS for smooth scrolling
• Minimal DOM: Efficient DOM structure with minimal nesting

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

TypeScript Support

Full TypeScript support with comprehensive type definitions:

import type { 
  XConUIRepeater,
  XConUIRepeaterColumn,
  XConUIRepeaterRow 
} from '@stardyn/angular-ui-repeater';

License

MIT License - see LICENSE file for details.

Repository

https://github.com/stardyn/angular-ui-repeater