@eqproject/eqp-ui

v21.0.1

Published

25 days ago

Eqp User Interface

0High
0Medium
0Low

eqp

a.cipollone

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

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>

Breadcrumb

eqp-breadcrumb e eqp-breadcrumb-item

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>

eqp-breadcrumb-router

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

eqp-ui

Installazione

Importazione del modulo

Stili globali

Indice

Struttura base dell'applicazione

Sidebar

eqp-sidebar

Input

Output

Classi CSS applicate dinamicamente

Comportamento mobile

Esempio

eqp-sidebar-header

eqp-sidebar-brand

Input

eqp-sidebar-footer

eqp-sidebar-toggler

eqp-sidebar-nav

Input

[eqpSidebarToggle]

Input

SidebarService

Header

Input

Footer

Input

Container

Input

Breadcrumb

eqp-breadcrumb e eqp-breadcrumb-item

eqp-breadcrumb-router

Input

BreadcrumbRouterService

Servizi di utilità

ClassToggleService

SidebarNavService

Direttive

[eqpHtmlAttr]

Input

Modelli e tipi

INavData

Tipi di utilità

Personalizzazione SCSS

Variabili SCSS principali della sidebar

Sovrascrittura tramite CSS custom properties

File SCSS disponibili