Librairie de composants Libriciel

Page de démonstration

Ce projet est un regroupement de composants pour Angular 12 conformes à la charte graphique Libriciel-SCOP. Il est aussi possible d'utiliser cette librairie sur des projets non Angular.

ATTENTION : Le CSS Bootstrap en version > 4.0.0 est nécessaire pour un bon fonctionnement des composants.

Installation

Installer la librairie :

npm install @libriciel/ls-composants

Imports

Angular

Dans le fichier app.module.ts du projet Angular, importer le module LsComposantsModule.

Par exemple :

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {LsComposantsModule} from "@libriciel/ls-composants";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    LsComposantsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Projet classique

Il est possible d'utiliser les tags HTML définis dans la librairie en important le fichier JS suivant :

node_modules/@libriciel/ls-composants/ls-elements.js

L'usage des composants sera identique à celui d'un projet Angular.

Éléments

ls-footer

Bas de page d'application charté Libriciel SCOP

Usage

Attributs :

• application_name : nom de l'application
• active : icône de l'application "active"
  • Valeurs possibles :
    • asalae
    • idelibre
    • iparapheur
    • pastell
    • s2low
    • webdpo
    • webdelib
    • webgfc

Classes :

• ls-login-footer : le footer en version page de login (avec les icônes de toutes les applications) est affiché

Exemple

Un footer de page de login pour Pastell :

<ls-footer application_name="Pastell v3.0.0" active="pastell" class="ls-login-footer"></ls-footer>

Un footer de page d'application pour i-Parapheur :

<ls-footer application_name="i-Parapheur v5.0.0" active="iparapheur"></ls-footer>

ls-sidebar / ls-content

Barre latérale et contenu associé

Usage

La barre latérale doit être utilisée en association avec le tag ls-content afin de prendre en compte l'état du menu (réduit / déployé).

La barre latérale attend 2 éléments section :

• un pour le logo et le nom de la collectivité (classe ls-sidebar-coll-logo)
• un pour le menu en lui-même (classe ls-sidebar-menu)

Le menu doit être dans une liste ul ayant la classe main-menu. Dans chaque élément du menu principal, il faut ajouter un sous-menu avec un élément ul ayant la classe sub-menu.

NB : la liste de sous-menu sub-menu est obligatoire, même vide.

Exemple

Une sidebar avec image de collectivité et menus :

<ls-sidebar>
  <section class="ls-sidebar-coll-logo">
    <img alt="Logo de la ville"
         src="https://images.midilibre.fr/api/v1/images/view/5b4c4de23e454662d5256caf/full/image.jpg">
    <span>Ville de Montpellier</span>
  </section>
  <section class="ls-sidebar-menu">
    <ul class="main-menu">
      <li>
        <a href="#">
          <i class="fa fa-folder-open"></i>
          <span>
            Menu 01
            <span class="badge badge-secondary">12</span>
          </span>
        </a>

        <ul class="sub-menu">
          <li>
            <a href="#">
              Sous-menu 01
            </a>
          </li>
          <li>
            <a href="#">
              Sous-menu 02
            </a>
          </li>
          <li>
            <a href="#">
              Sous-menu 03
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-folder-open"></i>
          <span>Menu 02</span>
        </a>
        <ul class="sub-menu">
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-folder-open"></i>
          <span>Menu 03</span>
        </a>
        <ul class="sub-menu">
        </ul>
      </li>
    </ul>
  </section>
</ls-sidebar>

<ls-content>
  <div class="container">
    <p>Mon joli contenu de page</p>
  </div>
</ls-content>