This library is still under development, implemenation can change between versions.

Libraire @quadrixo/material

Cette librairie est un ensemble de composants et autres objets Agnular utiles pour le développement d'une application.

Table des matières

• Installation
• AppShell
  • Navigation
  • Light/Dark mode
  • AppshellService

Installation

La librairie @angular/material est nécessaire.

Puis un simple npm add @quadrixo/material (ou yarn add @quadrixo/material).

AppShell

AppShell est un layout complet de page. Il se base sur le composant sidenav.

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, AppshellModule],
  template: `
  <qdx-appshell>
    <router-outlet></router-outlet>
  </qdx-appshell>`,
  styleUrl: './app.component.scss'
})
export class AppComponent {
}

Navigation

La navigation est affiché dans la colonne de gauche. Les éléments de la navigations sont liés à l'entrée items.

Les éléments ont les propriétés :

• icon: (string) le nom de l'icône (utilisé avec <mat-icon></mat-icon>)
• label: (string) Le nom de l'entrée
• link: (string) le lien de l'entrée
• meta: (any, optionel) une metadata supplémentaire (avec le tag matListItemMeta)

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, AppshellModule],
  template: `
  <qdx-appshell [items]="items">
    <router-outlet></router-outlet>
  </qdx-appshell>`,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  public readonly items = [
    { icon: 'home', label: 'Home', link: '/' },
    //...
  ];
}

Light/Dark mode

Il est possible d'afficher un bouton pour basculer entre les modes clair et foncé.

Pour utiliser la fonctionnalité de bascule entre le mode foncé et clair il faut :

• Utiliser un thème de couleur personnalisé via mat.theme()
• Supprimer la déclaration theme-type: light, dans la définition du thème
• Ajout dans le sélecteur html la propriété color-scheme: light dark;
• Ajouter l'option modeSwitcher: true lors de l'appel à provideAppshellLayout()

html {
+ color-scheme: light dark;
  @include mat.theme((
    color: (
      primary: mat.$violet-palette,
      tertiary: mat.$orange-palette,
-     theme-type: light,
    ),
    typography: Roboto,
    density: 0
  ));
}

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideAppshellLayout('Demo APP', { modeSwitcher: true }),
  ]
}

AppshellService

Le service AppshellService permet d'interagir avec le layout AppShell à partir d'un composant.

API :

• mini (WritableSignal): réduit ou élargi la colonne de nagivation
• mode (WritableSignal<'light' | 'dark'>): définit le mode clair ou foncé
• title (WritableSignal<string | TemplateRef>): modifie le titre de la page affiché dans la Toolbar
• mainAction (WritableSignal): ajoute une action principale en haut de la colonne de navigation
• actions (WritableSignal<AppshellAction[]>): définie les actions de la Toolbar

/**
 * Define an action accessible from the toolbar or the sidenav bar.
 */
export interface AppshellAction {
  /**
   * The icon's symbol name of the action
   */
  icon: string;
  /**
   * The label of the action
   */
  label: string;
  /**
   * A callable function invoke when the action button is pressed
   */
  action: CallableFunction;
}