📦 ngx-stacker

Una direttiva Angular 18+ ultra-leggera per gestire layout Flexbox utilizzando i Signal nativi. Nessuna classe CSS chilometrica, nessuna dipendenza esterna, solo puro HTML reattivo.

✨ Caratteristiche

• 100% Standalone: Nessun NgModule richiesto.
• Signal-Powered: Reattività istantanea grazie ai Signal Inputs di Angular 18.
• Developer Experience: Sintassi HTML pulita e leggibile (<div stacker>).
• Classless: Niente conflitti di CSS. Genera dinamicamente stili inline.

🚀 Installazione

npm install ngx-stacker

Come si usa

Importa la direttiva nel tuo componente standalone e usala direttamente nell'HTML.

import { Component } from '@angular/core';
import { NgxStackerDirective } from 'ngx-stacker';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxStackerDirective],
  templateUrl: './app.component.html',
})
export class AppComponent {}

nel tuo file .html

<div stacker justify="space-between" align="center" gap="1rem">
  <span>Logo</span>
  <nav>Menu di navigazione</nav>
</div>

🎛️ API

<table>
  <thead>
    <tr>
      <th>Proprietà</th>
      <th>Tipo</th>
      <th>Valore Default</th>
      <th>Descrizione</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong><code>direction</code></strong></td>
      <td><code>string</code></td>
      <td><code>'row'</code></td>
      <td>Regola il flex-direction. Accetta: <code>'row'</code>, <code>'column'</code>, <code>'row-reverse'</code>, <code>'column-reverse'</code>.</td>
    </tr>
    <tr>
      <td><strong><code>justify</code></strong></td>
      <td><code>string</code></td>
      <td><code>'flex-start'</code></td>
      <td>Regola il justify-content. Accetta: <code>'center'</code>, <code>'space-between'</code>, <code>'space-around'</code>, <code>'flex-end'</code>, ecc.</td>
    </tr>
    <tr>
      <td><strong><code>align</code></strong></td>
      <td><code>string</code></td>
      <td><code>'stretch'</code></td>
      <td>Regola l'align-items. Accetta: <code>'center'</code>, <code>'flex-start'</code>, <code>'flex-end'</code>, <code>'baseline'</code>, ecc.</td>
    </tr>
    <tr>
      <td><strong><code>gap</code></strong></td>
      <td><code>string</code></td>
      <td><code>'0'</code></td>
      <td>Imposta la spaziatura interna tra gli elementi. Accetta misure CSS come <code>'16px'</code>, <code>'1rem'</code>.</td>
    </tr>
    <tr>
      <td><strong><code>wrap</code></strong></td>
      <td><code>string</code></td>
      <td><code>'nowrap'</code></td>
      <td>Regola il flex-wrap (mandare a capo). Accetta: <code>'wrap'</code>, <code>'nowrap'</code>, <code>'wrap-reverse'</code>.</td>
    </tr>
  </tbody>
</table>

Licenza

MIT