21.0.1 • Published 1 month ago

@eqproject/eqp-ui

Licence

MIT

Version

21.0.1

Deps

Size

510 kB

Vulns

Weekly

Summary Dependency Versions

eqp-ui

Libreria di componenti UI di layout per applicazioni Angular basate su CoreUI. Fornisce la struttura fondamentale dell'applicazione: sidebar navigabile, header, footer, container e breadcrumb. Tutti i componenti sono standalone o raggruppati in moduli leggeri e sfruttano Angular Signals per la gestione reattiva dello stato della sidebar.

Installazione

npm install @eqproject/eqp-ui --legacy-peer-deps

Importazione del modulo

Per le applicazioni NgModule:

import { EqpUiModule } from '@eqproject/eqp-ui';

@NgModule({
  imports: [EqpUiModule]
})
export class AppModule {}

EqpUiModule re-esporta SidebarModule, BreadcrumbModule e ContainerComponent.

Per applicazioni standalone è possibile importare direttamente i singoli componenti/moduli (SidebarModule, BreadcrumbModule, ecc.).

Stili globali

Aggiungere in angular.json (o src/styles.scss) il riferimento al foglio di stile principale:

@use '@eqproject/eqp-ui/src/lib/scss/eqpui';

Indice

Struttura base dell'applicazione
Sidebar
Header
Footer
Container
Breadcrumb
Servizi di utilità
- ClassToggleService
- SidebarNavService
Direttive
- [eqpHtmlAttr]
Modelli e tipi
- INavData
- Tipi di utilità
Personalizzazione SCSS

Struttura base dell'applicazione

Il layout tipico di un'applicazione che utilizza eqp-ui è il seguente:

<body class="sidebar-fixed">
  <eqp-sidebar id="mySidebar" [visible]="true">
    <eqp-sidebar-brand
      [brandFull]="{ src: 'assets/logo.png', width: 120, height: 46, alt: 'Logo' }"
      [brandNarrow]="{ src: 'assets/logo-sm.png', width: 46, height: 46, alt: 'Logo' }"
      [routerLink]="['/']"
    ></eqp-sidebar-brand>
    <eqp-sidebar-header><!-- contenuto header sidebar --></eqp-sidebar-header>
    <eqp-sidebar-nav [navItems]="navItems"></eqp-sidebar-nav>
    <eqp-sidebar-footer><!-- contenuto footer sidebar --></eqp-sidebar-footer>
    <eqp-sidebar-toggler eqpSidebarToggle></eqp-sidebar-toggler>
  </eqp-sidebar>

  <div class="wrapper d-flex flex-column min-vh-100">
    <c-header class="header header-sticky" position="sticky">
      <button eqpSidebarToggle type="button">&#9776;</button>
      <eqp-breadcrumb-router></eqp-breadcrumb-router>
    </c-header>

    <div class="body flex-grow-1 px-3">
      <eqp-container [breakpoint]="'lg'">
        <router-outlet></router-outlet>
      </eqp-container>
    </div>

    <c-footer>
      <span>© 2026 EQProject</span>
    </c-footer>
  </div>
</body>

Sidebar

eqp-sidebar

Selettore: eqp-sidebar Export as: eqpSidebar Standalone: true

Il componente radice della sidebar. Gestisce la visibilità, la modalità narrow/unfoldable e l'adattamento mobile tramite BreakpointObserver. Lo stato è sincronizzato con SidebarService tramite un effect() di Angular Signals: ogni cambiamento pubblicato sul signal sidebarState viene recepito e applicato automaticamente al componente.

Input

Input	Tipo	Default	Descrizione
`[visible]`	`boolean`	`false`	Visibilità della sidebar. Emette `visibleChange` al cambio.
`[narrow]`	`boolean`	`false`	Rende la sidebar ridotta (solo icone). Incompatibile con `unfoldable`.
`[unfoldable]`	`boolean`	`false`	In modalità narrow, la sidebar si espande al passaggio del mouse.
`[overlaid]`	`boolean`	`false`	La sidebar si sovrappone al contenuto anziché spingerlo.
`[colorScheme]`	`'dark' \| 'light'`	`undefined`	Schema colori per adattare il testo all'sfondo.
`[id]`	`string`	`undefined`	ID HTML della sidebar, usato da `[eqpSidebarToggle]` per il targeting.
`[placement]`	`'start' \| 'end'`	`undefined`	Posizionamento (sinistra o destra).
`[position]`	`'fixed' \| 'sticky'`	`'fixed'`	Tipo di posizionamento CSS.
`[size]`	`'sm' \| 'lg' \| 'xl'`	`undefined`	Dimensione della sidebar.

Output

Output	Tipo	Descrizione
`(visibleChange)`	`boolean`	Emesso ogni volta che la visibilità cambia (anche da toggle programmatico).

Classi CSS applicate dinamicamente

Il componente applica automaticamente le seguenti classi CSS all'elemento host in base allo stato:

Classe	Condizione
`sidebar`	Sempre
`sidebar-fixed`	`position() === 'fixed'` e non mobile
`sidebar-narrow`	`narrow && !unfoldable`
`sidebar-narrow-unfoldable`	`unfoldable`
`sidebar-overlaid`	`overlaid`
`sidebar-{size}`	Se `size()` è definito
`show`	Visibile su mobile
`hide`	Non visibile

Comportamento mobile

La sidebar osserva il breakpoint definito dalla variabile CSS --cui-mobile-breakpoint (default md, ovvero 767.98px). Al di sotto di tale breakpoint:

la sidebar viene nascosta automaticamente
la modalità unfoldable viene disabilitata
al click su un link di navigazione, la sidebar si chiude automaticamente

Esempio

<!-- Sidebar fissa, visibile di default, con schema scuro -->
<eqp-sidebar id="sidebar" [visible]="true" colorScheme="dark" position="fixed">
  <!-- ... -->
</eqp-sidebar>

<!-- Toggle su un pulsante nell'header -->
<button type="button" eqpSidebarToggle="sidebar">Menu</button>

eqp-sidebar-header

Selettore: eqp-sidebar-header Standalone: true

Contenitore per contenuto posizionato in cima alla sidebar, prima della navigazione. Applica automaticamente la classe sidebar-header. Si utilizza tipicamente per inserire un campo di ricerca o un'intestazione utente.

<eqp-sidebar-header>
  <div class="sidebar-header-text">v1.2.0</div>
</eqp-sidebar-header>

eqp-sidebar-brand

Selettore: eqp-sidebar-brand Standalone: true

Gestisce il logo/brand della sidebar con supporto nativo per la modalità narrow. Applica automaticamente la classe sidebar-brand.

Input

Input	Tipo	Descrizione
`[brandFull]`	`any`	Logo completo mostrato quando la sidebar è espansa. Accetta oggetto `{ src, width, height, alt }`.
`[brandNarrow]`	`any`	Logo ridotto mostrato in modalità narrow.
`[routerLink]`	`string \| any[]`	Route a cui navigare al click sul brand.

<eqp-sidebar-brand
  [brandFull]="{ src: 'assets/brand/logo.png', width: 118, height: 46, alt: 'Logo' }"
  [brandNarrow]="{ src: 'assets/brand/logo-sm.png', width: 46, height: 46, alt: 'Logo' }"
  [routerLink]="['/dashboard']"
>
</eqp-sidebar-brand>

eqp-sidebar-footer

Selettore: eqp-sidebar-footer Standalone: true

Contenitore per contenuto posizionato in fondo alla sidebar. Applica automaticamente la classe sidebar-footer. Utile per informazioni sull'utente loggato o versione dell'app.

<eqp-sidebar-footer class="d-none d-md-flex">
  <span>Utente: Mario Rossi</span>
</eqp-sidebar-footer>

eqp-sidebar-toggler

Selettore: eqp-sidebar-toggler Standalone: true

Pulsante di toggle posizionato in fondo alla sidebar per passare tra modalità narrow e modalità espansa. Applica automaticamente la classe sidebar-toggler. Non richiede configurazione: il toggle è gestito dalla [eqpSidebarToggle] direttiva applicata allo stesso elemento o a qualsiasi elemento esterno.

<!-- Inserito dentro eqp-sidebar, funge da toggler nativo della sidebar -->
<eqp-sidebar-toggler eqpSidebarToggle toggle="unfoldable"></eqp-sidebar-toggler>

eqp-sidebar-nav

Selettore: eqp-sidebar-nav Standalone: true

Componente di navigazione che renderizza un array di INavData come lista di voci di menu. Gestisce automaticamente i diversi tipi di voce (link, gruppo, titolo, divisore, etichetta) e chiude la sidebar su mobile al click su un link.

Input

Input	Tipo	Default	Descrizione
`[navItems]`	`INavData[]`	`[]`	Array delle voci di navigazione.
`[dropdownMode]`	`'path' \| 'none' \| 'close'`	`'path'`	Comportamento dei gruppi di navigazione. Vedi sotto.
`[compact]`	`boolean`	`undefined`	Se `true`, applica la classe `compact` alla nav.

Valori di dropdownMode:

Valore	Comportamento
`'path'`	Il gruppo si apre automaticamente se il percorso corrente corrisponde a una delle voci figlie.
`'none'`	I gruppi non reagiscono alla navigazione.
`'close'`	Al click su un gruppo, tutti gli altri gruppi non correlati al percorso corrente vengono chiusi.

<eqp-sidebar-nav [navItems]="navItems" dropdownMode="close"></eqp-sidebar-nav>

[eqpSidebarToggle]

Selettore: [eqpSidebarToggle] Export as: eqpSidebarToggle Standalone: true

Direttiva che, al click sull'elemento host, invia un'azione di toggle a SidebarService. Può essere applicata a qualsiasi elemento (pulsanti nell'header, toggler della sidebar, ecc.).

Input

Input	Tipo	Default	Descrizione
`[eqpSidebarToggle]`	`string`	`undefined`	ID della sidebar target. Se omesso, agisce sulla prima sidebar registrata.
`[toggle]`	`'visible' \| 'unfoldable'`	`'visible'`	Proprietà da alternare.

<!-- Toggle visibilità (per l'header) -->
<button type="button" [eqpSidebarToggle]="'mySidebar'" toggle="visible">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- Toggle narrow/unfoldable (per il toggler nella sidebar) -->
<eqp-sidebar-toggler [eqpSidebarToggle]="'mySidebar'" toggle="unfoldable">
</eqp-sidebar-toggler>

SidebarService

Servizio singleton (providedIn: 'root') che gestisce lo stato della sidebar tramite Angular Signals.

readonly sidebarState = signal<ISidebarAction>({});
toggle(action: ISidebarAction): void

ISidebarAction è l'interfaccia dell'azione inviata al service:

Proprietà	Tipo	Descrizione
`visible`	`boolean \| 'toggle'`	Visibilità target
`unfoldable`	`boolean \| 'toggle'`	Stato unfoldable target
`toggle`	`'visible' \| 'unfoldable'`	Indica che la proprietà va alternata (anziché impostata)
`narrow`	`boolean`	Stato narrow
`mobile`	`boolean`	Indica se il cambiamento proviene da un breakpoint mobile
`sidebar`	`SidebarComponent`	Riferimento diretto al componente sidebar
`id`	`string`	ID della sidebar target (alternativa al riferimento diretto)

SidebarComponent si sottoscrive al signal tramite un effect() e aggiorna il proprio stato interno ad ogni emit. Il backdrop su mobile viene gestito da SidebarBackdropService, che aggiunge/rimuove un overlay DOM tramite Renderer2.

Utilizzo programmatico:

constructor(private sidebarService: SidebarService) {}

openSidebar() {
  this.sidebarService.toggle({ visible: true, id: 'mySidebar' });
}

closeSidebar() {
  this.sidebarService.toggle({ visible: false, id: 'mySidebar' });
}

toggleSidebar() {
  this.sidebarService.toggle({ toggle: 'visible', id: 'mySidebar' });
}

Header

Selettore: c-header oppure [c-header] Standalone: true

Componente header dell'applicazione. Gestisce il posizionamento e il wrapping opzionale in un container Bootstrap.

Input

Input	Tipo	Default	Descrizione
`[container]`	`boolean \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'fluid'`	`undefined`	Se definito, avvolge il contenuto in un container Bootstrap del breakpoint specificato.
`[position]`	`'fixed' \| 'sticky'`	`undefined`	Posizionamento CSS dell'header.
`[role]`	`string`	`'header'`	Attributo `role` HTML.

<!-- Header sticky con container responsive lg -->
<c-header position="sticky" [container]="'lg'">
  <button type="button" eqpSidebarToggle>
    <span class="navbar-toggler-icon"></span>
  </button>
  <eqp-breadcrumb-router></eqp-breadcrumb-router>
</c-header>

Footer

Selettore: c-footer oppure [cFooter] Standalone: true

Componente footer dell'applicazione. Applica automaticamente la classe footer.

Input

Input	Tipo	Default	Descrizione
`[position]`	`'fixed' \| 'sticky'`	`undefined`	Posizionamento CSS del footer.
`[role]`	`string`	`'footer'`	Attributo `role` HTML.

<c-footer>
  <span>© 2026 EQProject. Tutti i diritti riservati.</span>
  <span class="ms-auto">Powered by <a href="#">EQProject</a></span>
</c-footer>

Container

Selettore: eqp-container

Wrapper Bootstrap per il contenuto principale. Gestisce le varianti container, container-fluid e container-{breakpoint}.

Input

Input	Tipo	Default	Descrizione
`[breakpoint]`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| string`	`''`	Applica `container-{breakpoint}`. La larghezza è al 100% fino al breakpoint indicato.
`[fluid]`	`boolean`	`false`	Se `true`, applica `container-fluid` (larghezza sempre al 100%).

<!-- Container con larghezza massima a partire da lg -->
<eqp-container [breakpoint]="'lg'">
  <router-outlet></router-outlet>
</eqp-container>

<!-- Container fluid -->
<eqp-container [fluid]="true">
  <router-outlet></router-outlet>
</eqp-container>

Per la breadcrumb manuale, si compongono eqp-breadcrumb ed eqp-breadcrumb-item.

eqp-breadcrumb — Selettore: eqp-breadcrumb, standalone: true

Contenitore della breadcrumb. Applica role="navigation" e aria-label="breadcrumb".

Input	Tipo	Default	Descrizione
`[ariaLabel]`	`string`	`'breadcrumb'`	Valore dell'attributo `aria-label`.
`[role]`	`string`	`'navigation'`	Valore dell'attributo `role`.

eqp-breadcrumb-item — Selettore: eqp-breadcrumb-item

Singola voce della breadcrumb. Se [url] è presente, renderizza un [routerLink]; se [active] è true, applica la classe active e l'attributo aria-current="page".

Input	Tipo	Descrizione
`[active]`	`boolean`	Voce attiva (ultima nella breadcrumb).
`[url]`	`string \| any[]`	URL per il `[routerLink]` interno.
`[attributes]`	`INavAttributes`	Attributi HTML aggiuntivi applicati al link.
`[linkProps]`	`INavLinkProps`	`NavigationExtras` e opzioni di `routerLinkActive`.

<eqp-breadcrumb>
  <eqp-breadcrumb-item [url]="['/']">Home</eqp-breadcrumb-item>
  <eqp-breadcrumb-item [url]="['/utenti']">Utenti</eqp-breadcrumb-item>
  <eqp-breadcrumb-item [active]="true">Dettaglio</eqp-breadcrumb-item>
</eqp-breadcrumb>

Selettore: eqp-breadcrumb-router Standalone: true

Breadcrumb automatica basata sulla navigazione Angular. Genera le voci leggendo la proprietà title dei data di ogni ActivatedRoute. Non richiede configurazione manuale delle voci: si aggiorna automaticamente ad ogni NavigationEnd.

Input

Input	Tipo	Default	Descrizione
`[items]`	`IBreadcrumbItem[]`	`undefined`	Se fornito, sovrascrive la generazione automatica con un array statico di voci.

// Nel routing module
const routes: Routes = [
  {
    path: 'utenti',
    component: UtentiComponent,
    data: { title: 'Utenti' },
    children: [
      {
        path: ':id',
        component: DettaglioComponent,
        data: { title: 'Dettaglio utente' }
      }
    ]
  }
];

<!-- Nel template dell'header: si aggiorna automaticamente -->
<eqp-breadcrumb-router></eqp-breadcrumb-router>

<!-- Con override manuale -->
<eqp-breadcrumb-router [items]="breadcrumbItems"></eqp-breadcrumb-router>

BreadcrumbRouterService

Servizio singleton (providedIn: 'root') che mantiene la lista delle voci della breadcrumb in un signal Angular.

readonly breadcrumbs = signal<IBreadcrumbItem[]>([]);

Si sottoscrive ai NavigationEnd del Router e percorre la struttura degli ActivatedRoute per costruire la breadcrumb a partire dalle proprietà data.title di ogni segmento dell'URL.

IBreadcrumbItem:

Proprietà	Tipo	Descrizione
`label`	`string`	Testo della voce
`url`	`string \| any[]`	URL della voce
`attributes`	`INavAttributes`	Attributi HTML aggiuntivi
`linkProps`	`INavLinkProps`	Opzioni `routerLink`
`class`	`string`	Classi CSS aggiuntive

Servizi di utilità

ClassToggleService

Servizio singleton (providedIn: 'root') per il toggle di classi CSS su qualsiasi elemento del DOM tramite un selettore CSS.

toggle(selector: string, className: string): void

Utile per aggiungere/rimuovere classi direttamente sul body o su elementi di layout (es. per nascondere la sidebar via JavaScript puro).

constructor(private classToggle: ClassToggleService) {}

toggleDarkMode() {
  this.classToggle.toggle('body', 'dark-mode');
}

SidebarNavService

Classe astratta injectable che può essere estesa per fornire la configurazione delle voci di navigazione tramite dependency injection, disaccoppiando la definizione del menu dal componente che lo utilizza.

@Injectable()
export abstract class SidebarNavService {
  abstract getSidebarNavItemsConfig(): INavData[];
}

Utilizzo:

@Injectable({ providedIn: 'root' })
export class MyNavService extends SidebarNavService {
  getSidebarNavItemsConfig(): INavData[] {
    return [
      { name: 'Dashboard', url: '/dashboard', icon: 'cil-speedometer' },
      { name: 'Utenti', url: '/utenti', icon: 'cil-people' },
    ];
  }
}

Direttive

[eqpHtmlAttr]

Selettore: [eqpHtmlAttr] Export as: eqpHtmlAttr Standalone: true

Direttiva per applicare dinamicamente attributi HTML, classi e stili inline a un elemento tramite un oggetto. Usata internamente da eqp-sidebar-brand per propagare attributi al tag <a> del brand, ma disponibile per uso generico.

Input

Input	Tipo	Descrizione
`[eqpHtmlAttr]`	`{ [key: string]: any }`	Oggetto di attributi da applicare all'elemento host. La chiave `style` accetta un oggetto di proprietà CSS; la chiave `class` accetta una stringa o un array di stringhe; tutte le altre chiavi vengono trattate come attributi HTML standard.

<!-- Applica attributi data, stili e classi dinamicamente -->
<span
  [eqpHtmlAttr]="{ 'data-id': item.id, class: 'custom-class', style: { color: 'red' } }"
>
</span>

Modelli e tipi

INavData

Interfaccia principale per la definizione delle voci di navigazione della sidebar. Ogni voce dell'array passato a [navItems] deve rispettare questa struttura.

Proprietà	Tipo	Descrizione
`name`	`string`	Testo visualizzato nella voce
`url`	`string \| any[]`	URL per la navigazione interna (`routerLink`)
`href`	`string`	URL esterno (`<a href>`) — determina link esterno se inizia con `http`
`icon`	`string`	Classe CSS dell'icona (es. `'cil-home'`, `'fa fa-home'`)
`iconComponent`	`any`	Componente icona alternativo
`badge`	`INavBadge`	Badge da mostrare accanto al nome della voce
`title`	`boolean`	Se `true`, la voce è un titolo di sezione (non cliccabile)
`children`	`INavData[]`	Voci figlie — trasforma la voce in un gruppo espandibile
`divider`	`boolean`	Se `true`, la voce è un separatore visivo
`class`	`string`	Classi CSS aggiuntive da applicare alla voce
`label`	`INavLabel`	Etichetta colorata accanto alla voce
`wrapper`	`INavWrapper`	Wrapper HTML aggiuntivo intorno al contenuto
`attributes`	`INavAttributes`	Attributi HTML arbitrari (es. `disabled: true`)
`linkProps`	`INavLinkProps`	Opzioni `routerLink` (queryParams, fragment, routerLinkActive, ecc.)
`variant`	`string`	Variante visiva della voce

INavBadge:

Proprietà	Tipo	Descrizione
`text`	`string`	Testo del badge
`color`	`string`	Colore Bootstrap (`'primary'`, `'danger'`, ecc.)
`size`	`string`	Dimensione del badge
`class`	`string`	Classi CSS aggiuntive

INavLabel:

Proprietà	Tipo	Descrizione
`variant`	`string`	Tipo di etichetta (es. `'pill'`)
`class`	`string`	Classi CSS dell'etichetta

Esempio di configurazione menu completa:

export const navItems: INavData[] = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'cil-speedometer',
    badge: { color: 'info', text: 'NUOVO' }
  },
  {
    title: true,
    name: 'Gestione'
  },
  {
    name: 'Utenti',
    url: '/utenti',
    icon: 'cil-people',
    children: [
      { name: 'Lista utenti', url: '/utenti/lista', icon: 'cil-list' },
      { name: 'Aggiungi utente', url: '/utenti/nuovo', icon: 'cil-user-follow' }
    ]
  },
  { divider: true },
  {
    name: 'Link esterno',
    href: 'https://www.eqproject.it',
    icon: 'cil-external-link',
    attributes: { target: '_blank', rel: 'noopener' }
  },
  {
    name: 'Voce disabilitata',
    url: '/non-disponibile',
    icon: 'cil-ban',
    attributes: { disabled: true }
  }
];

Tipi di utilità

eqpui.types.ts esporta una serie di tipi TypeScript utilizzati dagli input dei componenti per garantire il type-safety delle configurazioni.

Tipo	Valori	Utilizzo
`Colors`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string`	Colori Bootstrap per badge, link, ecc.
`ColorsGradient`	`${Colors}-gradient`	Variante gradient di un colore
`BackgroundColors`	`Colors \| 'body' \| 'white' \| 'transparent'`	Colori di sfondo
`TextColors`	Esteso da `Colors` + varianti emphasis/muted	Colori del testo
`Positions`	`'fixed' \| 'sticky'`	Posizionamento CSS di header, footer, sidebar
`Sizes`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| string`	Dimensioni componenti
`Breakpoints`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| string`	Breakpoint Bootstrap
`Shapes`	`'rounded' \| 'rounded-circle' \| 'rounded-pill' \| ...`	Arrotondamento elementi
`Placements`	`'auto' \| 'top' \| 'bottom' \| 'start' \| 'end' \| ...`	Posizionamento tooltip/popover
`Directions`	`'down' \| 'up' \| 'start' \| 'end' \| ''`	Direzione apertura dropdown
`InputType`	`'text' \| 'email' \| 'password' \| 'number' \| ...`	Tipo input HTML
`ButtonType`	`'button' \| 'submit' \| 'reset'`	Tipo pulsante HTML
`BadgePositions`	`'top-start' \| 'top-end' \| 'bottom-end' \| 'bottom-start'`	Posizione badge
`Alignment`	`'baseline' \| 'top' \| 'middle' \| 'bottom' \| ...`	Allineamento verticale

INavLinkProps raccoglie le proprietà di NavigationExtras applicabili ai link interni:

Proprietà	Tipo	Descrizione
`queryParams`	`{ [k: string]: any }`	Query parameters da aggiungere alla navigazione
`fragment`	`string`	Frammento URL
`queryParamsHandling`	`'merge' \| 'preserve' \| ''`	Gestione dei query params esistenti
`preserveFragment`	`boolean`	Preserva il frammento durante la navigazione
`skipLocationChange`	`boolean`	Non aggiorna la barra degli indirizzi
`replaceUrl`	`boolean`	Sostituisce l'entry nello storico del browser
`routerLinkActiveOptions`	`{ exact: boolean } \| IsActiveMatchOptions`	Opzioni per `routerLinkActive`
`routerLinkActive`	`string \| string[]`	Classi da aggiungere quando il link è attivo
`ariaCurrentWhenActive`	`'page' \| 'step' \| 'location' \| ...`	Attributo `aria-current` quando il link è attivo

Personalizzazione SCSS

eqp-ui espone un sistema di variabili SCSS con prefisso $cui- e variabili CSS custom con prefisso --cui- per la personalizzazione del tema senza dover modificare i file sorgente.

Variabili SCSS principali della sidebar

// Dimensioni
$sidebar-width: 16rem !default;
$sidebar-narrow-width: 4rem !default;

// Colori generali
$sidebar-bg: #3c4b64 !default;
$sidebar-color: rgba(255, 255, 255, 0.87) !default;
$sidebar-border-color: transparent !default;

// Brand
$sidebar-brand-height: 4rem !default;
$sidebar-brand-bg: rgba(0, 0, 0, 0.2) !default;

// Voci di navigazione
$sidebar-nav-link-color: rgba(255, 255, 255, 0.6) !default;
$sidebar-nav-link-hover-bg: rgba(255, 255, 255, 0.05) !default;
$sidebar-nav-link-active-color: #fff !default;
$sidebar-nav-link-active-bg: rgba(255, 255, 255, 0.1) !default;
$sidebar-nav-link-disabled-color: rgba(255, 255, 255, 0.25) !default;

Sovrascrittura tramite CSS custom properties

Le variabili CSS sono esposte sull'elemento .sidebar e possono essere sovrascritte direttamente nell'applicazione ospite:

// src/styles.scss
.sidebar {
  --cui-sidebar-bg: #2c3e50;
  --cui-sidebar-nav-link-active-bg: #e74c3c;
  --cui-sidebar-brand-bg: transparent;
}

File SCSS disponibili

File	Descrizione
`_eqpui.scss`	Entry point principale — include tutti i partial
`_variables.scss`	Variabili di design token (colori, spacing, ecc.)
`_sidebar.scss`	Stili base della sidebar (carica `sidebar/_sidebar.scss`, `_sidebar-nav.scss`, `_sidebar-narrow.scss`)
`_header.scss`	Stili dell'header
`_footer.scss`	Stili del footer
`_breadcrumb.scss`	Stili della breadcrumb
`_layout.scss`	Stili del layout generale (`wrapper`, body dell'app)
`eqpui-grid.scss`	Solo il sistema a griglia Bootstrap
`eqpui-reboot.scss`	Solo i CSS reset
`eqpui-utilities.scss`	Solo le utility classes

È possibile importare i file separati per ridurre il bundle CSS finale includendo solo i moduli necessari.