@libriciel/ls-composants NPM

Librairie de composants Libriciel

Ce projet est un regroupement de composants pour Angular 7 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écéssaire 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>

@libriciel/ls-bootstrap-5 @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons tslib

@everything-registry/sub-chunk-547 @zalastax/nolb-_lib

8 months ago

8 months ago

9 months ago

8 months ago

7 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

Librairie de composants Libriciel

Installation

Imports

Angular

Projet classique

Éléments

ls-footer

Usage

Exemple

ls-sidebar / ls-content

Usage

Exemple

`ls-footer`

`ls-sidebar` / `ls-content`