UI Toolkit - actimeo/var GitHub Wiki

Choix d'un toolkit graphique

Choix d'un toolkit graphique pour les 3 interfaces graphiques web :

  • éditeur de portails (portal builder)
  • éditeur de la structure (organization builder)
  • interface utilisateur

Contraintes :

  • open source
  • doit être utilisable avec Angular2
  • doit contenir certains éléments indispensables :
    • calendrier (fullCalendar de préférence)
    • menu avec sous-menu (type Accordéon) adaptable à la taille de l'écran
    • boîtes de dialogues
    • tabs
    • tableaux
    • pagination
    • alertes (messages apparaissant quelques secondes dans un angle de l'écran)
    • tooltips (pour documenter des éléments à leur survol)
    • charts
    • [...]

Pour chacune des 3 interfaces, décider quels appareils sont pris en charge parmi :

  • PC
  • Tablette
  • Mobile

Maquettes actuelles avec Bootstrap

Doc api avec ng2-material

Material design

Specs : https://www.google.com/design/spec/material-design/

Implémentation Angular2 : https://justindujardin.github.io/ng2-material/

Implémentation Angular2 « officielle » : https://material.angular.io/ (alpha)

Icônes associés : https://design.google.com/icons/

Bootstrap 3

Specs : http://getbootstrap.com/

Implémentation Angular2 : http://valor-software.com/ng2-bootstrap/

Icônes associés : http://getbootstrap.com/components/

Bootstrap 4 (alpha)

Specs : http://v4-alpha.getbootstrap.com/

Implémentation Angular2 : http://valor-software.com/ng2-bootstrap/index-bs4.html

PrimeFaces

Implémentation Angular2 : http://www.primefaces.org/primeng/

Icônes associés : http://www.primefaces.org/sentinel/font-icons.xhtml

Lightning Design System

Implémentation Angular2 : http://ng-lightning.github.io/ng-lightning/#/components

Icônes associés : https://www.lightningdesignsystem.com/resources/icons/

Banques d'icônes supplémentaires

Monochrome

Couleur